chrome.tabs.executeScript() formatting issue

Question

I'm trying to change the font color of all elements on a web page. I'm having a tough time adding this for-loop into the code: inside the executeScript() function. Where did I go wrong?

popup.js

function main() {

    $("p").click(function () {
        var color = $(this).text();
        chrome.tabs.executeScript({
        code: 'var el = document.getElementByTagName("*"); for (var i=0; i < el.length; i++) { el[i].style.color = color;}'
        });
    });
}
$(document).ready(main);

manifest.json

// metadata file containing basic properties

{
  "name": "Font Color Changer",
  "description": "Change the color of the current page's font.",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["popup.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Change the font color!",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html

<!DOCTYPE html>
<html>
    <title>popup for browser action</title>
    <head>
    <script src="jquery-3.1.1.min.js"></script>
    <script type ="text/javascript" src="popup.js"></script>

    <style>
        p {font-size: 20px; border: black solid 1px; text-align: center; padding: 2px;}
        a.red:link {text-decoration: none; color: red;}
        a.blue:link {text-decoration: none; color: blue;}
        a.black:link {text-decoration: none; color: black;}
        div.colors {float: left;}
        div.font {float:right;}
    </style>
</head>
<body>
<!-- parent div for the three different options -->
<div style = "width: 175px;">
    <!-- div for color selectors -->
    <div class = "colors">
        <p><a class = "red" href="#">red</a></p>
        <p><a class = "blue" href="#">blue</a></p>
        <p><a class = "black" href="#">black</a></p>
    </div>
    <!-- div for font-family selectors -->
    <div class = "font">
        <p>Comic Sans</p>
        <p>Calibri</p>
        <p>Reset</p>
    </div>
</div>
</body>

Use `.executeScript` within extension. See [Chrome Extension Trigger Keydown JS](http://stackoverflow.com/questions/23044611/chrome-extension-trigger-keydown-js/) — guest271314, Oct 04 '16 at 01:15
what do you mean by that? the code above is in my extension. — Emilia Clarke, Oct 04 '16 at 01:17
Missing `"s"` at `document.getElementByTagName`;that is, `document.getElementsByTagName` — guest271314, Oct 04 '16 at 01:20
that's true. any idea why this still doesn't change the color of text on the screen? it works on some text if i put in a few if statements, but it doesn't work at all with the above format — Emilia Clarke, Oct 04 '16 at 01:25
Have you adjusted to `document.getElementsByTagName()` ? Is `jQuery` defined at `popup.js`? — guest271314, Oct 04 '16 at 01:27
yes, and i downloaded jquery and have it in the same directory as the rest of my files. i also linked it to the html file im using. — Emilia Clarke, Oct 04 '16 at 01:32
What does `console.log(jQuery().jquery)` within `popup.js` log at `console`? Can you include `manifest.json` at Question? Also, you have not passed `color` variable to `code` property of `.executeScript`, but rather the string `"color"`; e.g., `code: 'var el = document.getElementByTagName("*"); for (var i=0; i < el.length; i++) { el[i].style.color = ' + color + ';}'` ` — guest271314, Oct 04 '16 at 01:33
`jQuery` is not defined at `popup.js`. Have you checked `Errors` at `Extensions` setting; reviewed linked Question/Answer? — guest271314, Oct 04 '16 at 02:09
Also, [multiline strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Multi-line_strings). — Daniel Herr, Oct 04 '16 at 02:24

guest271314 · Answer 1 · 2016-10-04T14:56:39.157

You are missing first parameter to .executeScript; document.getElementByTagName() is missing "s" after Element; color is not defined at .executeScript call; jQuery is not necessary to return expected result.

Adjust popup.js to

function click(e) {
  chrome.tabs.executeScript(null, {
    code: "var el = document.getElementsByTagName('*'); " 
          + "for (var i=0; i < el.length; i++) { el[i].style.color ='" 
          + e.target.textContent 
          + "'}"
  });
  window.close();
}

document.addEventListener("DOMContentLoaded", function(e) {
  var p = document.querySelectorAll('p');
  for (var i = 0; i < p.length; i++) {
    p[i].addEventListener('click', click);
  }
});

popup.html to

<!DOCTYPE html>
<html>
    <title>popup for browser action</title>
    <head>
    <style>
        p {font-size: 20px; border: black solid 1px; text-align: center; padding: 2px;}
        a.red:link {text-decoration: none; color: red;}
        a.blue:link {text-decoration: none; color: blue;}
        a.black:link {text-decoration: none; color: black;}
        div.colors {float: left;}
        div.font {float:right;}
    </style>

</head>
<body>
<!-- parent div for the three different options -->
<div style = "width: 175px;">
    <!-- div for color selectors -->
    <div class = "colors">
        <p><a class="red" href="#">red</a></p>
        <p><a class="blue" href="#">blue</a></p>
        <p><a class="black" href="#">black</a></p>
    </div>
    <!-- div for font-family selectors -->
    <div class = "font">
        <p>Comic Sans</p>
        <p>Calibri</p>
        <p>Reset</p>
    </div>
</div>
    <script src="popup.js"></script>
</body>
</html>

manifest.json

{
  "name": "Font Color Changer",
  "description": "Change the color of the current page's font.",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
    "default_title": "Change the font color!",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

See A browser action with a popup that changes the page color

chrome.tabs.executeScript() formatting issue

1 Answers1