javascript - 无法在检查器/开发工具中选择 Chrome 扩展程序/代码环境

Question

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

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

在开发工具中，我的扩展没有列在我可以在这里选择使用的环境中

我的代码: list .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>

新 list .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 并单击background page 或 来检查您的背景页面您的扩展程序的背景页面(非事件) 链接。 (Chrome 在隐式生成的最小后台页面 background.html 上运行您的后台脚本。)

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

在 StackOverflow 上已经多次解决了扩展页面上下文与内容脚本与常规页面之间的差异，但最好先阅读一般的扩展架构:

Extension architecture ( Chrome )

Anatomy of a web extension (Firefox，但架构基本相同)