Chrome Extension not loading/ code environment not selectable in Inspector/ Dev tools

user_1553326 0
Viewed 277

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.

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 Chrome Dev Tools environment chooser

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>

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
  }

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
    }
google-chrome-extension jquery javascript
2 Answers

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.)

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.)

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:

Extension architecture (Chrome)

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

user_56954590

This is just because you are using JQuery. with JQuery reference to injected HTML doesn't work and FaceBook does a lot of that. How to go around this is to write your event listeners in a different way. instead of: 

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

Use this rather: 

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

user_92158370
Related