Chrome 扩展未加载/在检查器/开发工具中无法选择代码环境

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

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

In dev tools, my extension isn't listed in the environments I can choose to use here

我的代码： 清单.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
    }

您可以通过以下方式检查您的背景页面：chrome://extensions并单击背景页 or 背景页（非活动）您的扩展程序的链接。 （Chrome 在最小的隐式生成的后台页面上运行后台脚本background.html.)

不过你的一般逻辑是有缺陷的，扩展页面（和脚本 - 通常是背景页面、选项页面、弹出窗口等）运行在单独的环境中，无法访问常规页面的 DOM。你需要一个内容脚本 https://developer.chrome.com/extensions/content_scripts为您HighlightFb() and AddFbListeners()让他们访问常规（在您的情况下是 Facebook）页面的 DOM。 （顺便说一句，内容脚本将列在常规页面的 Chrome DevTools 的环境选择器中。）

扩展页面上下文与内容脚本与常规页面之间的差异已在 StackOverflow 上多次讨论，但最好首先总体了解扩展架构：

扩展架构 https://developer.chrome.com/extensions/overview#arch（铬合金）

Web 扩展的剖析 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension（Firefox，但架构本质上是相同的）