Расширение Chrome не загружается / среда кода не выбирается в инструментах Inspector / Dev

Question

Я разрабатываю расширение для Chrome, чтобы выделить уведомления Facebook с помощью jQuery.Я могу заставить его загружаться, когда Facebook загружается впервые, но через некоторое время он перестает работать.В манифесте я попытался установить постоянное значение true и false, без разницы.Я попытался использовать background.js.

Я возился с chrome.tabs.onActivation и .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
  }
  

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
    }

Answer 1

Это только потому, что вы используете JQuery. с JQuery ссылка на внедренный HTML не работает, и FaceBook делает много этого. Как обойти это - написать слушателям событий по-другому. вместо:

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

Используйте это скорее:

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

Answer 2

Вы можете проверить свою фоновую страницу, перейдя на chrome://extensions и нажав фоновую страницу или фоновую страницу (неактивна) ссылка для вашего расширения.(Chrome запускает ваши фоновые сценарии на минимальной неявно сгенерированной фоновой странице background.html.)

Хотя ваша общая логика имеет недостатки, страницы расширения (и сценарии - обычно фоновая страница, страница параметров, всплывающее окно и т. д.) работают в отдельной среде и не имеют доступа к DOM обычных страниц .Вам нужен скрипт контента для ваших HighlightFb() и AddFbListeners(), чтобы позволить им получить доступ к DOM обычной (в вашем случае Facebook) страницы.(Кстати, сценарии содержимого будут перечислены в средстве выбора среды в Chrome DevTools на обычной странице.)

Различия между контекстом страниц расширения и сценариями содержимого и обычными страницами неоднократно рассматривались в StackOverflow, но может быть лучше сначала прочитать об архитектуре расширения в целом:

архитектура расширения (Chrome)

анатомия веб-расширения (Firefox, но архитектура по сути идентична)