Question

我正在尝试制作Chrome扩展程序，只要用户打开新标签页，该扩展程序就会运行脚本。

我有以下基本代码，只要点击扩展按钮就应该将页面涂成红色。

当我导航到一个真实的网站时似乎工作正常（例如：在stackoverflow.com上，单击我的扩展图标，页面变为红色）。但是，如果我只是创建一个全新的选项卡并单击该按钮，则弹出窗口会加载，但页面永远不会更改颜色。

的manifest.json：

{
  "manifest_version": 2,
  "name": "ConsoleTap",
  "version": "0.1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "menu.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>",
    "https://ajax.googleapis.com/"
  ]
}

menu.html：

<!doctype html>
<html>
    <head>
        <script src="menu.js"></script>
    </head>
    <body>
        hello
    </body>
</html>

menu.js：

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"});
});

有关页面无法更新新标签背景颜色的任何想法？我猜测DOMContentLoaded永远不会被解雇，或者在负载发生后以某种方式监听它？

Answer 1

Chrome不允许在其内部网页上使用内容脚本：more info

在Chrome 60及更早版本中，仍然可以将内容脚本注入默认新标签页的子框架中，因为它包含多个框架，因此限制仅适用于顶级框架。对于默认的newtab（不是某些newtab扩展），我们可以匹配其框架URL（https://www.google.com/_/chrome/newtab*）以注入内容脚本，该脚本将在收到来自弹出窗口的消息后激活：

的manifest.json：

{
    "name": "executeScript",
    "version": "1.0",
    "content_scripts": [{
        "matches": ["https://www.google.com/_/chrome/newtab*"],
        "js": ["newtabcontent.js"],
        "run_at": "document_start"
    }],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ],
    "manifest_version": 2
}

newtabcontent.js：

chrome.runtime.onMessage.addListener(function(msg) {
    if (msg == "activate") {
        document.body.style.background = 'red';
        document.body.style.backgroundColor = 'red';
    }
});

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    if (tabs[0].url == "chrome://newtab/") {
        chrome.tabs.sendMessage(tabs[0].id, "activate");
    } else {
        chrome.tabs.executeScript({
            code: "document.body.style.backgroundColor='red'",
            allFrames: true
        });
    }
});

注意：

安装此扩展程序并显示其权限后，用户将看到它可以“在www.google.com上读取和更改您的数据”。
chrome.tabs.executeScript无法在newtab页面上使用，因为由于不支持的方案chrome://而导致主框架立即失败，甚至无法继续执行子框架。

chrome.tabs.executeScript新浏览器选项卡不起作用？

1 个答案:

Chrome不允许在其内部网页上使用内容脚本：more info