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

Question

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

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
    }

[How to access the webpage DOM rather than the extension page DOM?](//stackoverflow.com/a/4532567) — wOxxOm, Nov 17 '18 at 06:31

score 4 · Answer 1 · answered Jul 23 '19 at 11:20

4

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)

answered Jul 23 '19 at 11:20

Petr Srníček

2,296
10
22

Thanks @Petr, I have tried using a content script before, but I will try again and feedback :) – Craig Lambie Jul 23 '19 at 12:01
I did come to this conclusion myself actually I think, and switched to content scripts I have added my updated maniffest.json to the question. – Craig Lambie Jul 23 '19 at 19:29
I removed the line "run_at": "document_end" and it seems to be working now.... from the "new manifest.json" script as above... – Craig Lambie Jul 23 '19 at 20:00
Actually Petr it has disappeared again :( the content scripts are not there in the inspector... I wonder if it has something to do with what this post is talking about? https://stackoverflow.com/questions/21692646/how-does-facebook-disable-the-browsers-integrated-developer-tools?rq=1 Maybe @rsanchez will have some ideas? – Craig Lambie Jul 25 '19 at 18:51
I don't think that your issues have anything to do with Facebook blocking the console (that seems to be a 5 years old thing). Please update the code in your question to your current version so I can investigate. Your current `new` code is chaotic at a quick glance. BTW, are you fiddling with `chrome.tabs.onActivated` and `.onHighlighted` for learning purposes? Because you don't need them to highlight an element on a page. – Petr Srníček Jul 25 '19 at 21:06
Yep @Petr, that is right - just playing/ trying to look for ways to get the script to inject... – Craig Lambie Jul 27 '19 at 11:25
removed background.js and updated manifest.json new to reflect current code. – Craig Lambie Jul 28 '19 at 10:51
btw. I just loaded the extension into Firefox, as is. And so far, it works every time.. .go figure. – Craig Lambie Jul 28 '19 at 13:27
I dont have much time to play with it right now, but I believe that your `scroll` event listener never fires, because Facebook has its own scroll event listener attached to `window` which cancels the event before it gets a chance to bubble to your listener. I would suggest a different approach - perhaps looking for inserted notification elements to highlight using a `MutationObserver`. – Petr Srníček Jul 28 '19 at 13:42

score 0 · Answer 2 · answered Jul 26 '19 at 20:14

0

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

answered Jul 26 '19 at 20:14

doc-han

630
9
13

Thanks Doc. The issue is more getting the scripts to load at all...? I tried changing this, but not seeing a change to the actual script loading / being available as an environment to work in in dev tools? – Craig Lambie Jul 27 '19 at 11:24

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

2 Answers2

Linked