Question

我正在尝试构建一个Chrome扩展程序，它会在Deezer的相册页面上添加一个按钮。

我的清单如下：

{
  "manifest_version": 2,

  "name": "Deezeet",
  "description": ".",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://www.deezer.com/*", "http://www.deezer.com/*"],
      "js": ["jquery.js", "popup.js"],
      "run_at": "document_end"
    }
  ],
  "web_accessible_resources": ["script.js"],
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "content_security_policy": "script-src 'self' https://api.deezer.com; object-src 'self' https://api.deezer.com; script-src 'self'"
}

我的popup.js（来自here）：

var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

我的script.js（现在仅用于测试）：

$('header').hide();

但它不起作用。我的所有JS都在弹出窗口内工作。我该怎么办？

Answer 1

您打开弹出框并在弹出窗口中看到效果：

[...]即使我使用alert（＆＃39; bam＆＃39;）或其他简单的东西，它也会在我的弹出窗口内运行。

当您打开它时，它与任何其他页面无关。您已将脚本设置为内容脚本。它将在您导航到页面或刷新现有页面时执行。

如果您在单击扩展按钮时需要触发脚本，则应从清单中删除default_popup属性，添加后台脚本并将其置于单击处理程序中：

chrome.browserAction.onClicked.addListener(function(tab){
  chrome.tabs.executeScript(tab.id, {file: "popup.js"});
  // Or, alternatively, send a message to an already-injected script
});

请注意：将脚本作为<script>元素注入是一个非常严厉的解决方案，只需要逃避隔离的上下文。在您的测试用例中，您只能访问该网页的DOM，并且不需要您的popup.js包装。

使用Chrome扩展程序向网页添加按钮

1 个答案: