20

誰でも私にこれを説明できますか。content_script と Google 拡張機能を使用して Web ページに CSS ファイルを挿入しようとしていますが、CSS ファイルが Web ページに追加されません。誰かが私が間違っていることを教えて、それを修正するのを手伝ってもらえますか? ありがとう

マニフェスト:

{
  "name": "Extension",
  "version": "0",
  "description": "",


  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
    "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

myStyles.css

#test {
    margin: 0 10px;
    background: #fff;
    padding: 3px;
    color: #000;
}
4

2 に答える 2

52

スタイル シートは実際には挿入されますが、他のスタイルがルールをオーバーライドするため、適用されません。ルールを機能させるには、いくつかのオプションがあります。

  1. CSS ルールの具体性を高めます。

  2. すべてのルールに次のサフィックスを付け!importantます。

    #test {
    margin: 0 10px !important;
    background: #fff !important;
    padding: 3px !important;
    color: #000 !important;
}

  3. コンテンツ スクリプトを介して CSS を挿入します。

    myScript.js:

    var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

    manifest.json

    {
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["myStyles.css"]
}

    最後のキーは、マニフェスト バージョンweb_accessible_resources2 がアクティブな場合に必要です。これにより、非拡張ページから CSS ファイルを読み取ることができます。

于 2012-03-15T14:16:12.327 に答える
1

特定の Web サイトをターゲットにする場合は、次のようにします。

"matches": ["https://*.google.com/*"]

//*以前は、使用が機能しないため、私.googleにとって本当のトリックです。www

于 2020-07-06T17:16:27.900 に答える