无法加载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>

background.js

// background.js


chrome.tabs.onActivated.addListener( function (inf) { listenedfor(); });

chrome.webNavigation.onCompleted.addListener( function (inf) { listenedfor(); });

chrome.tabs.onHighlighted.addListener( function (inf) {	listenedfor(); });

function listenedfor() {
	chrome.tabs.getSelected(null, function(tab) { 
    
	if(tab.url.indexOf('facebook') > 1) { 
		//chrome.tabs.executeScript(tab.id, {"file": "FbYourHighlight.js"});
		HighlightFb();
		//alert(tab.url) };
		AddFbListeners();
		}
	});
}

function HighlightFb() {
	alert("highlight");
	//highlight you
	 $("._33c:contains('you')").find('*').css("background-color", "#CCCC00");
	//highlight your
	 $("._33c:contains('your')").find('*').css("background-color", "66CC00");
	}

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

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

Answer 1

您可以转到chrome://extensions并单击 背景页面 或 背景页面（无效），以检查背景页面您的扩展程序的em> 链接。 （Chrome浏览器在最小隐式生成的背景页面background.html上运行背景脚本。）

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

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

Extension architecture（Chrome）

Anatomy of a web extension（Firefox，但架构基本相同）

Answer 2

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

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

改用它：

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