web-dev-qa-db-ja.com

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

コンテンツスクリプトの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名は変数「currenttheme」です。

前に述べたように、ポップアップを使用して機能します。ただし、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);
  }
});
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
20
Jacques Blom

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

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);

ここに 記事 トピックがあります。

60
jfriend00

拡張フリッカー

修正するのが難しいことではない生態系へのトラマ

序文：

Cssをページに追加する多くの方法の中で、それらのほとんどは画面をちらつきます-最初はcssを適用せずにページを表示し、次にそれを適用します。私はいくつかの方法を試しましたが、以下が私の発見です。

要旨

<link>に挿入されたコンテンツスクリプト にcss <style>または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ファイルでは、プログラムによるものをいくつでも処理できます。 manifest.jsonで提供されるURLパターンマッチングは非常に限られていますが、ここでは実際にURLのすべての?query_stringと#hashを確認し、完全な正規表現と文字列操作を使用して、 cssを注入しないかどうか。そのcssは、設定に基づいたり、バックグラウンドページへのメッセージングと調整したりすることもできます。

別れの言葉

  • .insertCSSは使用しないでください。ちらつきがあります。
7
Devin G Rhode

マニフェストのパーミッションフィールドに追加できるのは簡単です。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)
0
Divyesh Kanzariya