Chrome 扩展程序 - 当 url 更改时附加到页面答案

【问题标题】：Chrome Extension - Append to page when url changesChrome 扩展程序 - 当 url 更改时附加到页面
【发布时间】：2016-12-06 04:17:59
【问题描述】：

我正在开发一个 chrome 扩展程序，它将监听域上的 url 更改，当 url 与模式匹配时，将一些 HTML 附加到 DOM。

我的 manifest.json 看起来像这样：

{
    "name": "Append to DOM",
    "description": "Testing",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "http://www.somedomain.com/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ],
    "permissions": ["tabs", "activeTab"]
}

content.js 看起来像这样：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.url == 'http://www.somedomain.com/matching-pattern') {
        var myDiv = document.createElement("div");
        myDiv.innerHTML = 'SAMPLE HTML';
        document.body.appendChild(myDiv);
    }
});

但是，当 url 更新时，监听器不会触发（并且 div 没有附加）。

感谢任何帮助。

【问题讨论】：

您确定监听器没有触发，问题不在于 URL 与您的模式不匹配吗？您在这里使用了完整的 URL；像 https 这样小的东西可能会破坏比赛。（也许 RegEx 模式会更好）
@Andrew 这是有效的，但是即使我取出条件（所以在任何选项卡 url 更改时），我也没有看到附加的 div，这让我相信侦听器没有触发。
您可以使用console.log("test") 或类似的方法来检查侦听器是否正在触发？（仅在出现奇怪的情况不允许附加 div 时才建议这样做）
@Andrew 好电话。但是在追加之前做一个日志不会出现在控制台中。
哦，天哪...好吧，我没有编写浏览器扩展的经验，但是通过查找一些内容，我发现您的“content.js”绝对没有问题。我不知道发生了什么..！对不起，我希望我能提供更多帮助：/

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

内容脚本无权访问chrome.tabs 你可以在后台脚本中使用chrome.tabs

为了处理内容脚本中 URL 的更改，最便宜且始终有效的解决方案 - 使用 setInterval

var prevURL = '';
setInterval(function() {
    if (document.location.href != prevURL) {
        // do something
        prevURL = document.location.href;
    }
}, 1000);

【讨论】：