0

So I'm trying my hand at a google chrome extension which in theory should be extremely straight forward. I know there are tons of stack queries and I've tried a few, I've even copied and pasted direct solutions for testing and I have been unsuccessful. So here is the project. When a page loads, check the html content, and change the icon programmatically.

This is my content.js

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {
    var markup = document.documentElement.innerHTML;
    var m = markup.indexOf("candy");
    if (m > -1) {
      chrome.browserAction.setIcon({path: "check.png"});
    } else {
      chrome.browserAction.setIcon({path: "cross.png"});
    }
  }
})

This is my manifest.json

{
  "manifest_version": 2,

  "name": "Tag Analyzer Plugin",
  "description": "Check if tag exist on page",
  "version": "1.0",

  "browser_action": {
   "default_icon": "cross.png"
  },
  "content_scripts": [
      {
        "matches": [
          "<all_urls>"
        ],
        "js": ["content.js"]
      }
    ],
  "permissions": ["<all_urls>"]
}

Right now I'm running this item as a content script because as a content script I can use the logic

var markup = document.documentElement.innerHTML;
var m = markup.indexOf("candy");
if (m > -1) {} else {}

However as a content script the chrome API stuff doesn't work. When I run this script as a background script the script works, except that 

var markup = document.documentElement.innerHTML;

doesn't return the pages html, it returns the injected script html.

I've read this stack which was informative as to what the difference was and I've read and tested many stacks like here this, without much success. So obviously i'm missing something and doing something wrong. Thank in advanced for any help.

UPDATES:

So I've made some modifications, but it's still not working, though I think that it's closer to working.

As per the comments below I am now using a content script and background script. No errors are being thrown, however the background script isn't doesn't anything.

content.js 

var markup = document.documentElement.innerHTML;
var m = markup.indexOf("candy");
if (m > -1) {
  chrome.runtime.sendMessage({"found" : true});
} else {
  chrome.runtime.sendMessage({"found": false});
}

background.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if request.found {
      alert("HERE");
      chrome.browserAction.setIcon({
          path: "check.png",
          tabId: sender.tab.id
      });
    } else {
      alert("HERE2");
      chrome.browserAction.setIcon({
          path: "cross.png",
          tabId: sender.tab.id
      });
    }
});

manifest.json

{
  "manifest_version": 2,

  "name": "Tag Analyzer Plugin",
  "description": "find tag on page",
  "version": "1.0",

  "browser_action": {
   "default_icon": "cross.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
      {
        "matches": [
          "<all_urls>"
        ],
        "js": ["content.js"]
      }
    ],
  "permissions": ["<all_urls>"]
}

I've added some alerts on the background.js to see if it was being trigger and nothing, not does the icon change.

Community
  • 1
  • 1
reticentroot
  • 3,612
  • 2
  • 22
  • 39
  • `chrome.tabs` isn't available in a content script, see [the docs](https://developer.chrome.com/extensions/content_scripts). You need an [event page script](https://developer.chrome.com/extensions/event_pages). See [chrome.tabs returns undefined in content script](https://stackoverflow.com/q/15034859) and [Update chrome extension icon on tab switch/change](https://stackoverflow.com/a/29173057) – wOxxOm Sep 20 '16 at 18:44
  • I'm aware and I've already tried to move it to the background script, where as i said the code runs, but the html content of the page isn't returned, which is what I need in order to find something on it. – reticentroot Sep 20 '16 at 18:47
  • I copied that example you provided exactly as it is on the solution and it returns the error onSupportedPageNeedChangeIcon, minus the manifest, which I just modified to suit the example and the icon name. – reticentroot Sep 20 '16 at 18:51
  • kk, let me check that out :-) thanks – reticentroot Sep 20 '16 at 18:55
  • @wOxxOm I've made some changes. I'm still having issues if you see something. – reticentroot Sep 20 '16 at 19:06
  • 1
    Use the [debugger of background page](http://stackoverflow.com/a/10258029) and you'll see the syntax is wrong. Add parentheses: `if (request.found)` – wOxxOm Sep 20 '16 at 19:09
  • @wOxxOm thanks! That was it, totally missed that. If you want to submit a solution go ahead and I'll mark it as correct. Thanks for your help. – reticentroot Sep 20 '16 at 19:11

0 Answers0