Question

我想要的是当我点击browser_action图标时，网页会执行一些css，但是使用以下代码失败，它根本没有响应。有什么想法吗？

清单json文件看起来像这样

{
  "manifest_version": 2,

  "name": "Test",
  "description": "yada yada",
  "version": "1.0",

  "permissions": [
    "https://*/*",
    "tabs"
  ],
    "icons": {
    "128" : "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png"
  },
      "content_scripts": [
    {
      "matches": [
            "http://*/*",
            "https://*/*"
            ],
      "js": ["jquery.js","request.js"],
      "run_at": "document_end"   
    }
  ]
}

我的request.js在这里

chrome.browserAction.onClicked.addListener(function (){
  document.body.style.background = 'yellow';
});

Answer 1

据我了解，您希望使用programmatic injection更改相关网页的css。为此，您的 manifest.json 应包含以下权限：

  "permissions": [
    "activeTab"
  ],

访问chrome。* API在内容脚本中受到限制

设置权限后，可以通过调用tabs.executeScript将JavaScript注入页面。要注入CSS，请使用tabs.insertCSS。

所以你想要做这样的事情（注入javascript代码）：

 chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="yellow"'
   });
 });

或者，你可以使用activeTab上文档中描述的insertCss方法，如下所示：

 chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.insertCSS(tab.id, {
         code: 'document.body.style.backgroundColor="yellow"'
    });
 });

再次来自docs：

如果应始终注入您的内容脚本代码，请使用content_scripts字段在扩展清单中注册它，如下例所示 -

 "content_scripts": [
 {
  "matches": ["http://www.google.com/*"],
  "css": ["mystyles.css"], //mystyle.css gets injected into the relevant pages.
  "js": ["jquery.js", "myscript.js"]
 }
],

编辑 - 我之前应该明确说明这一点，但documentation明确表示内容脚本不能

使用chrome。* API，使用例外： extension（getURL，inIncognitoContext，lastError，onRequest，sendRequest）

因此，您无法在内容脚本中执行以下操作（我想知道它对您有用）：

chrome.browserAction.onClicked.addListener(function callback)

也就是说，您可以访问background page(s)中的browserAction API。它需要这样的东西：

的manifest.json ：

 {
  ...
  "background": {
    "scripts": ["background.js"]
  },

 ...
 }

background.js ：

 chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="yellow"'
   });
 });

实质上在后台页面中使用chrome.browserAction，因为内容脚本不支持它。我希望我能澄清一下我的观点，这可以帮助你解决问题。

browser_action触发content_script失败

1 个答案: