コンテンツスクリプトJSファイルを使用してプログラムでCSSファイルを挿入できますか？

StackOverflow https://stackoverflow.com/questions/9345003

質問

コンテンツスクリプトJSファイルを使用してプログラムでCSSファイルを挿入できますか？

JSファイルがPopup.htmlにリンクされている場合、CSSを挿入することができます。問題は、ボタンをクリックしてポップアップを開いてCSSを注入する必要があることです。私はそれを自動的に、そして背景で起こしたいです。

私のコードで何が起こるか...

  1. xmlhttprequestを介してmysqlデータベースから変数を取得します
  2. 関数「ProcessData（）」を呼び出す
  3. 「ProcessData」は、XMLHTTPREQUESTのデータを処理します。より具体的には、変数を分割し、2つの異なる変数に入れて、それらをグローバルにします
  4. 「click（）」という関数を呼び出します
  5. 「クリック」は、settimeoutを使用して1250ミリ秒後にCSSを設定します
  6. Chrome.tabs.insertcssを使用してCSSを挿入します。 CSS名は変数です。現在のもの"

前に述べたように、ポップアップを使用して機能します。しかし、CSSが注入される前にポップアップを開く必要があります。

これをすべて実現するにはどうすればよいですか ユーザーの相互作用なしで自動的に?

これが私のコードです：

    function getData() {
if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        user_data = xmlhttp.responseText;
        window.user_data = user_data;
        processdata();
        }
      }
    xmlhttp.open("GET","http://localhost:8888/g_dta.php",true);
    xmlhttp.send();
}

getData();

function processdata() {
  var downdata = user_data.split('|||||');
  var installedthemes = downdata[0];
  var currenttheme = downdata[1].toString();
  window.currenttheme = currenttheme;
  click();
  }

function click(e) { 
      function setCSS() {
          chrome.tabs.insertCSS(null, {file:currenttheme + ".css"});
          }
      setTimeout(function(){setCSS()}, 1250);
      document.getElementById('iFrameLocation').innerHTML = "<iframe src='http://localhost:8888/wr_dta.php?newid="+e.target.id+"'></iframe>";
      getData();
}

document.addEventListener('DOMContentLoaded', function () {
  var divs = document.querySelectorAll('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', click);
  }
});
役に立ちましたか？

解決

プログラムで新しいものを作成できます <link> タグを付けて、に追加します <head> JSファイルが動的にロードされるようにセクション。

var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

これがそうです 記事 話題になっている。

他のヒント

拡張フリッカー

生態系へのトラマ 修正するのは難しくありません

序文：

CSSをページに追加する多くの方法の中で、それらのほとんどが画面をちらつく原因となります - 最初はCSSを適用せずにページを表示し、後で適用します。私はいくつかの方法を試しましたが、以下は私の調査結果です。

要旨

CSSを追加する必要があります <link> またはa <style> aのタグ コンテンツスクリプトが注入されました document_start

そのコードは次のようになります：

var link = document.createElement('link');
link.href =  chrome.runtime.getURL('main.css');
  //chrome-extension://<extension id>/main.css
link.rel = 'stylesheet';
document.documentElement.insertBefore(link);

一部の動的CSSコードの場合：

var customStyles = document.createElement('style'); 
customStyles.appendChild(document.createTextNode(
   'body { background-color: ' + localStorage.getItem('background-color') + '}'
));
document.documentElement.insertBefore(customStyles);

スクリプトでこれを行う document_start あることを保証します ちらつきはありません！

推論

このJavaScriptファイルでは、任意の数のプログラム的なものを処理できます。提供されるURLパターンマッチング manifest.json 非常に限られていますが、ここでは実際にすべてを見ることができます ?query_string と #hash URLの、完全な正規表現と文字列操作を使用して、CSSを注入するかどうかを決定します。 CSSは設定に基づいていることも、背景ページへのメッセージングと調整することもできます。

別れの言葉

  • 使用しないでください .insertCSS, 、ちらつきに気付くでしょう。

マニフェストの権限フィールドに追加できるのは簡単です：参照 web_accessible_resources 

 , "web_accessible_resources": [
        "mystyle.css"
    ]

また、これを追加します content_scripts

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "css": ["mystyle.css"],
        "js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
    }],

また、プログラマティックインジェクションを使用して同じものを追加します insertcss（）.

chrome.tabs.insertCSS(integer tabId, object details, function callback)
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top