change color of element Chrome extension

Question

I have created a simple Jquery script as an chrome extension that are suppose to change the font color of a class.

the script is working fine if I use it directly in the console. but if I run it as an extension It wont trigger when the value is higher than one.

Any suggestion of what could be the problem?

Script.js

 (function(){
         $("#ID-layout-1435216276773-counterValue").each(function() {
                var el = $(this);
                var value = parseFloat(el.text());
                if (value > 1) {
                    el
                        .css("font-weight", "bold")
                        .css("color", "red");

                } else {
                    el.css("font-weight", "normal");
                }
            });   

          })();

Manifest

{
"update_url": "https://clients2.google.com/service/update2/crx",

    "name": "Live",
    "version": "0.3",
    "description": "Live",
    "permissions": [
    "tabs","<all_urls>"
    ],
    "browser_action": {
    "default_icon": "icon.png"
    },
    "icons": { 
                "16": "icon.png",
                "48": "icon.png",
                "128": "icon_128.png" 
            },
    "content_scripts": [
        {
        "matches": [
                "https://www.google.com/analytics/web/?hl=en#dashboard/6I8yfVs_TqSQ_b1tOJYR0Q/a8398197w15972131p74378741/*"
            ],
        "run_at": "document_end" ,
        "js": ["script.js"]     
        }
    ], 
    "manifest_version":2
}

_"if I run it as an extension"_ What exactly do you mean by that? What is your manifest, where is this code located, and is it the only code there? — Xan, Jul 13 '15 at 12:29
Why are you using `.each()`? ID identifiers (`#someId`) should only appear once on a page. If several items have the same ID then they should be classes (`.someClass`). Also, have you included the jQuery file? — Sverri M. Olsen, Jul 13 '15 at 12:32
Xan The .js script is working. but not when i run the extension. I have a manifest file but can't see why the problem is there. SverriM.Olsen Iknow. its supposed to run on a .class file but I tried the ID for science :) — Dymond, Jul 13 '15 at 12:35

score 3 · Accepted Answer · answered Jul 13 '15 at 12:42

3

You have not actually included jQuery in your content script.

Because content scripts run in isolation from the page, it does not matter whether the page itself has jQuery already included. Your script's context does not have it.

However, your code works from the console, because the code is, by default, executed in the page's context (see that <top frame> selector above the console?), which may have jQuery already. Add to that the fact that Chrome console provides a special version of $ to use in the console, even if there is no jQuery (in which case it's an alias for document.querySelector).

To see what's happening if you execute the code in the extension's context, you need to switch to its context (which is created after you inject something).

You need to add jQuery to your extension's files and inject it before your main script:

"content_scripts": [{
    "matches": [
       ...
    ],
    "run_at": "document_end" ,
    "js": ["jquery.min.js", "script.js"]     
}],

answered Jul 13 '15 at 12:42

Xan

74,770
16
179
206

Of course! how could I be so stupid and missed that. I added the Jquery.js file now. Still have problem with the extension but i sure will be much easier to find the problem. – Dymond Jul 13 '15 at 12:53
Don't forget that you have great debugging capabilities with Dev Tools - just open the page's console to see any errors/logging output you expect. – Xan Jul 13 '15 at 12:55
I cant see anything in Dev Tools/console. Was thinking that the extensions didn't show errors. Wonder what could be the problem... – Dymond Jul 13 '15 at 12:59
1

Oh, I see another problem. Your match pattern includes a URL fragment - that's not supported. You can use at most `https://www.google.com/analytics/web/*` and then in the content script analyse `location.hash`. – Xan Jul 13 '15 at 13:01
I tried to change my Matches to "" and the extension is working. But not from the site with fragment. how did you mean to use location.hash :) thanks – Dymond Jul 13 '15 at 13:54
1

I won't continue the dialog here, comments are not for follow-up questions. Ask a fresh question. – Xan Jul 13 '15 at 13:55

change color of element Chrome extension

1 Answers1

Linked