0

I'm working on my first chrome extension. It is designed to toggle the display of elements on facebook.com

The problem I am facing is that facebook.com is using AJAX, so my changes only happen on refresh. I think the solution here is to use chrome.tabs.onUpdated.addListener but the console comes back with “Uncaught TypeError: Cannot read property 'onUpdated’ of undefined"

Pretty sure I have everything declared properly.. here is my manifest.json and background.js

MANIFEST.JSON

    {
    "name": "Facebook Display Control",
    "version": "1.0",
    "description": "This extension toggles the display of elements on Facebook.com",
    //"background": {"page": "background.html"},
    "manifest_version": 2,
    "browser_action": {
      "name": "Manipulate DOM",
      "icons": ["icon.png"],
      "default_icon": "icon.png",
      "default_popup": "options.html"
    },
    "options_ui": {
      "page": "options.html"
    },
    "permissions": [
      "tabs",
      "storage",
      "webRequest",
      "http://*.facebook.com/*", 
      "https://*.facebook.com/*"
    ],
    "content_scripts": [ {
      "js": [ "jquery-3.1.1.min.js", "background.js" ],
      //"css": ["customStylex.css"],
      "matches": [ "http://*.facebook.com/*", "https://*.facebook.com/*" ]
    }]
  }

BACKGROUND.JS

    chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

    $(".home_right_column").css( "min-height", "0px" );
    $(".home_right_column").css( "display", "none" );

    chrome.storage.sync.get({"hideTrending": true}, function(e){
        a = e.hideTrending;
        if(a) {
          $("#pagelet_trending_tags_and_topics").css( "display", "none" );
        } else {
          $("#pagelet_trending_tags_and_topics").css( "display", "block" );
        }
    });

    chrome.storage.sync.get({"hideSuggestions": true}, function(e){
        a = e.hideSuggestions;
        if(a) {
          $("#pagelet_ego_pane").css( "display", "none" );
        } else {
          $("#pagelet_ego_pane").css( "display", "block" );
        }
    });

    });

Any help would be greatly appreciated!

Thanks!

viroxD
  • 1
  • 2
  • You cannot access chrome.tabs from a content script. You need a background page. See Chrome extension architecture. – Iván Nokonoko Jan 12 '17 at 22:59
  • Because it is confusing, it is a bad idea to call your content script *background.js*. – Makyen Jan 12 '17 at 23:32
  • I would suggest that you read the [Chrome extension overview](https://developer.chrome.com/extensions/overview) (and perhaps along with the pages linked from the overview). The [architecture section](https://developer.chrome.com/extensions/overview#arch) has overall architecture information which should help your understanding of how things are generally organized/done. You will probably also want to read [Content Scripts](https://developer.chrome.com/extensions/content_scripts), and [Message Passing](https://developer.chrome.com/extensions/messaging). – Makyen Jan 12 '17 at 23:33
  • 1
    okay I thought chrome.tabs can only be called from a file named background.js and also that you cannot run scripts inline from background.html – viroxD Jan 12 '17 at 23:50
  • It sounds like you have some misconceptions. I would suggest reading the documentation at the links I provided in my prior comment. Just the name that you use for the file (other than *manifest.json*) does not matter. What matters is the context/scope in which the script is running. This might also help: [Contexts and methods for communication between the browser action, background scripts, and content scripts of chrome extensions?](//stackoverflow.com/q/17246133) – Makyen Jan 12 '17 at 23:54
  • 1
    So how do I make my background.js a background script? The documentation you linked says that I dont need an html page, so I declared "background": {"scripts": ["background.js"]} and removed it from the content-scripts area, but now the script doesn't load at all. Is the only way to do this by passing a message? – viroxD Jan 13 '17 at 00:24

0 Answers0