无法加载Chrome扩展程序/无法在Inspector / Dev工具中选择代码环境

Question

我正在开发一个Chrome扩展程序，以使用jQuery突出显示Facebook通知。 当Facebook首次加载时，我可以加载它，但是过了一会儿它就停止工作了。 在清单中，我尝试将持久性设置为true和false，没有区别。 我尝试使用background.js。

我一直在摆弄chrome.tabs.onActivated和.onHighlighted并可以显示警报，但是看不到我的代码或jQuery $。

在开发工具中，我的扩展程序未在我可以选择在此处使用的环境中列出

我的代码：manifest.json

 { "name": "Facebook Your notification highlight", "version": "0.3.2", "description": "Highlights notifications with 'your' in the notification!", "background": { "scripts": ["jquery.min.js","background.js"], "persistent": false }, "browser_action": { "default_icon": "icon48.png" }, "icons": { "48": "icon48.png", "128": "icon128.png" }, "permissions": [ "tabs", "webNavigation", "https://www.facebook.com/" , "https://facebook.com/", "http://www.facebook.com/"], "manifest_version": 2 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

新manifest.js

 { "name": "Facebook Your notification highlight", "version": "0.3.3", "description": "Highlights notifications with 'your' in the notification!", "background": { "scripts": ["jquery.min.js","background.js"] }, "browser_action": { "default_icon": "icon48.png" }, "content_scripts": [ { "matches": ["https://*.facebook.com/"], "js": ["jquery.min.js","inject.js"] } ], "web_accessible_resources": [ "jquery.min.js", "inject.js" ], "icons": { "48": "icon48.png", "128": "icon128.png" }, "permissions": [ "activeTab", "tabs", "webNavigation", "https://www.facebook.com/" , "https://facebook.com/", "http://www.facebook.com/"], "manifest_version": 2 } 

新的inject.js

//add listeners when injected


$(document).ready(function() {
    AddFbListeners();
});



function AddFbListeners() {
    $('div#js_11.uiScrollableAreaWrap').scroll( function() {
        HighlightFb(); 
    });

    $('#fbNotificationsJewel').click ( function () {
        setTimeout( HighlightFb(), 250);
    });
}

function HighlightFb() {
    //alert("highlight");
    //highlight you
     $("._33c:contains('you')").find('*').css("background-color", "#CCCC00"); //greeny yellow
    //highlight your
     $("._33c:contains('your')").find('*').css("background-color", "66CC00"); //darker yellow
    //highlight reacted or liked
     $("._33c:contains('liked')").find('*').css("background-color", "#b2b300");  //mustard
     $("._33c:contains('reacted')").find('*').css("background-color", "#b2b300"); //mustard
     //mentioned
     $("._33c:contains('mentioned')").find('*').css("background-color", "#62b300"); //green
    }

Answer 1

您可以转到chrome://extensions并单击chrome://extensions的背景页面或背景页面（非活动）链接来检查背景页面。 （Chrome浏览器在最小隐式生成的背景页面background.html上运行背景脚本。）

但是，您的一般逻辑存在缺陷， 扩展页面 （和脚本-通常为背景页面，选项页面，弹出窗口等） 在单独的环境中运行，并且无法访问常规页面的DOM 。 您需要HighlightFb()和AddFbListeners()的内容脚本 ，以使它们访问常规（在您的情况下为Facebook）页面的DOM。 （顺便说一句，内容脚本将在常规页面的Chrome DevTools的环境选择器中列出。）

扩展页面上下文与内容脚本上下文与常规页面之间的差异已在StackOverflow上解决了很多次，但通常最好首先阅读扩展体系结构：

扩展架构 （Chrome）

Web扩展程序剖析 （Firefox，但架构本质上相同）

Answer 2

这仅仅是因为您正在使用JQuery。 JQuery对注入的HTML的引用无法正常工作，而FaceBook可以完成很多工作。 解决方法是用不同的方式编写事件侦听器。 代替：

 $("#item").click(function(){ // do something here }) 

而是这样使用：

 $(document).on("click","#item",function(){ //do something here })