CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-extension
Emilia Clarke
Emilia Clarke

Reputation: 83

chrome.tabs.executeScript() formatting issue

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>

Upvotes: 1

Views: 538

Answers (1)

guest271314
guest271314

Reputation: 1

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

Upvotes: 2

Related Questions