Question

我已经将脚本设置为“ run_at”：“ document_idle”，并将脚本插入标头中。但是，稍后尝试将其中定义的类应用于元素不会导致元素发生任何变化。

manifest.json：

 <代码> {
    “ manifest_version”：2
    “ name”：“测试”，
    “ description”：“使颜色”，
    “ version”：“ 1.0”，
    “背景”： {
        “ scripts”：[“ background.js”]，
        “持续”：false
    }，
    “ content_scripts”：[
    {
        “火柴”： [”*：//*/*”]，
        “ js”：[“ pageload.js”]，
        “ run_at”：“ document_idle”
    }]，
    “ browser_action”：{}，
    “权限”：[“ *：// * / *”，“ activeTab”，“标签”]
}

pageload.js：

 'use strict';

// onload，添加我们的类“ highlight”
var css =“ \ n \ t.highlight {background-color：yellow;} \ n”，
    rstyle = document.createElement（'style'）;

//将样式元素附加到头部
document.head.appendChild（rstyle）;

//rstyle.type =“ text / css”;
rstyle.appendChild（document.createTextNode（css））;

background.js（单击按钮即可运行）：

 'use strict';

//当用户点击浏览器操作时调用。
chrome.browserAction.onClicked.addListener（function（tab）{

    //切换将类放在主体上
    document.body.classList.toggle（'highlight'）;

}）;

页面加载后，我会在页眉中看到该元素。当我单击按钮时，我看到“ class ='highlight'”出现在独立的（后台页面）dev元素中，但没有出现在浏览器dev元素中。有人知道我在想什么吗？谢谢！

Answer 1

后台脚本在其自己的DOM中执行。要在活动标签中修改文档，您需要在清单的权限中使用“ activeTab”权限，并按以下方式执行代码

chrome.tabs.query({active: true, currentWindow: true}, 
function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: "document.body.classList.toggle('highlight');"});
});

Answer 2

这最终对我有用-在后台和内容源之间使用消息传递：

'use strict';

// onload, add our class "highlight"
var css = "\n\t.highlight { background-color:yellow; }\n",
    rstyle = document.createElement('style');

// Append style element to head
document.head.appendChild(rstyle);

rstyle.type = "text/css";
rstyle.appendChild(document.createTextNode(css));

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "toggle_highlight" ) {
        document.body.classList.toggle('highlight');
    }
  }
);

和

'use strict';

chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "toggle_highlight"});
  });
});

注入到content_scripts中的<style>不会应用于background.js中的文档元素

2 个答案: