Home/ Questions/Q 7653789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T12:06:46+00:00

I’m trying to figure out how to write a simple Chrome extension which allows

  • 0

I’m trying to figure out how to write a simple Chrome extension which allows to transliterate web pages from one alphabet to another. Unfortunately Google’s documentation on Chrome extensions is pretty much confusing for a beginner. I’ve seen a lot of similar questions here, f.ex. Replace text in website with Chrome content script extension, but still can’t get it clear. In a trial run I’m trying to replace all “a”‘s in the page with “Z”‘s.

Here’s my Manifest.json:

{
  "name": "My Chrome extension",
  "version": "0.1",
  "browser_action": {
    "default_icon": "icon.png"
},

"permissions": [
    "tabs", "http://*/*", "https://*/*"
],

"content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["myscript.js"]
}]

}

Myscript.js:

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(
  null, {code:"document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z")"});
});

But this fails to work. If I include only one line into Myscript.js:

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z");

then all ‘a’ letters get replaced with ‘Z’ as soon as the page has loaded, but this is not my goal, as I want to get it working only after the extension button is pressed.

Any help will be much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve set up your extension to inject your code using a content script. A content script will get injected into any page that matches your matches field. What you want is to only inject the script if they click on your Browser action. For this you can either have a background page that listens for the chrome.browserAction.onClicked event and reacts to it. Or you can have a default page for your Browser Action that injects the code into the page and if your put window.close as part of the script this will stop any popup from occuring and allow you to avoid using a background page (Im big on avoiding using a background page when ever possible).

    For an example of the first method, check out this sample….
    http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/

    And here’s an example of the second method (which is a modified version of the set_page_color sample)…
    manifest.json

    {
  "name": "A browser action that changes the page color.",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_title": "Set this page's color.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version": 2
}

    popup.html

    <!doctype html>
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

    popup.js

    chrome.tabs.executeScript(null,{file:"injectedCode.js"});
window.close();

    injectedCode.js 

    // This was just a quick look at changing text on a page
// there could be more tags you should ignore and there could be a better way of doing this all together
var ignoreTags = ["NOSCRIPT","SCRIPT","STYLE"];
var nodeIterator = document.createNodeIterator(
    document,
    NodeFilter.SHOW_TEXT,
    function (node){
      var parentTag = node.parentNode.tagName.toUpperCase();
      if ( ignoreTags.indexOf(parentTag)==-1 ) {return true} else {return false};
    },
    false
);

var node;
while ( (node = nodeIterator.nextNode()) ) {
   node.data = node.data.replace(/a/g, 'z');
}

    NOTE
    As Rob W points out in the comments chrome.tabs and chrome.browserAction are not usable in a content script which is why the chrome.browserAction.onClicked has to be used in a background page.

    • 0