无法加载Chrome扩展程序/无法在Inspector/Dev工具中选择代码环境 [英] Chrome Extension not loading/ code environment not selectable in Inspector/ Dev tools

问题描述

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

I am developing a chrome extension to highlight the Facebook Notifications using jQuery. I can get it to load, when Facebook loads first time, but after a while it stops working. In manifest I have tried persistent set to true and false, no difference. I have tried using background.js.

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

I have been fiddling with chrome.tabs.onActivated and .onHighlighted and can get an alert to show up, but my code or the jQuery $ isn't seen.

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

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

我的代码: manifest.json

My Code: 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

New 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

new 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并单击 背景页面 或<您的扩展程序的strong> 背景页面(无效) 链接. (Chrome在最小的隐式生成的背景页面background.html上运行背景脚本.)

You can inspect your background page by going to chrome://extensions and clicking the background page or background page (inactive) link for your extension. (Chrome runs your background scripts on a minimal implicitly generated background page background.html.)

尽管您的一般逻辑存在缺陷，但扩展页面(和脚本-通常是背景页面，选项页面，弹出窗口等)在单独的环境中运行，无法访问常规页面的DOM .对于HighlightFb()和 内容脚本 >，让他们访问常规(在您的情况下为Facebook)页面的DOM. (顺便说一句，内容脚本将在常规页面的Chrome DevTools的环境选择器中列出.)

Your general logic is flawed though, extension pages (and scripts - typically a background page, options page, pop-up etc.) run in a separate environment and have no access to the DOM of regular pages. You need a content script for your HighlightFb() and AddFbListeners() to let them access the DOM of a regular (in your case Facebook) page. (BTW, content scripts will be listed in the environment selector in Chrome DevTools of a regular page.)

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

The differences between the context of extension pages vs. content scripts vs. regular pages have been addressed many times on StackOverflow, but it might be best to read up on extension architecture in general first:

扩展架构(Chrome)

网络扩展程序的剖析 (Firefox，但架构本质上是相同的)

Anatomy of a web extension (Firefox, but the architecture is essentially identical)

这篇关于无法加载Chrome扩展程序/无法在Inspector/Dev工具中选择代码环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！