3

我正在尝试创建一个 chrome 扩展。当用户单击我的扩展程序的图标（browserAction）时，内容脚本会在打开的页面（当前选项卡）的正文中附加一个额外的 div。它在除 google 的搜索页面和 youtube 之外的所有网站上都可以正常工作。我没有收到任何错误消息或任何东西。它根本不会给出任何回应。

这是我在content.js中的代码：

alert('sdsd');
$('body').append("<div id='popup'>My extension name</div>");

我已将警报用于测试目的。因此，当切换扩展时，它应该显示一条警报消息，然后将 div 附加到正文，理想情况下！但它不会为这 2 个站点。

知道这里可能出了什么问题吗？

显现

{
    "name": "My first extension",
    "version": "1.0",
    "background": { "scripts": ["background.js"] },
    "content_scripts": [{
            "all_frames": true,
            "css": ["style.css"],
            "matches": ["http://*/*","https://*/*"]
        }],
    "permissions": [ "tabs","http://*/*" ],
    "browser_action": { "name": "test" },
    "manifest_version": 2
}

背景.js

chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.executeScript(null,{file:"jquery.min.js"},function(){
    chrome.tabs.executeScript(null,{file:"content.js"});
});

});

4

1 回答 1

3

在 Youtube 的页面中，$ 被覆盖并且不是 jQuery。它是

bound: function ()
{
    return document.getElementById.apply(document, arguments)
}

因此，您的代码会出现document.getElementById('body')异常undefined。

您应该尝试使用noConflict()。

编辑 ：

你为什么不简单地列出jQuery.min.js和你content.js的content_scripts而不是以编程方式注入它们。这样可以避免冲突。

编辑 2：

现在您使用了内容脚本，您应该使用此处描述的通信向background.js内容脚本发送显示警报的指令。

编辑 3：

另一种解决方案是使用编程注入（就像您最初所做的那样）而不使用 jquery，$('body').append("<div id='popup'>My extension name</div>");在 vanilla JS 中被翻译为

var div = document.createElement('div');
div.id = 'popup';
document.body.appendChild(div);
document.getElementById('popup').innerHTML = "My extension name"​;​

但它通常更清洁（并且需要更少的权限）以避免编程注入。

于 2012-10-23T18:54:15.403 回答