Home/ Questions/Q 8919025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T05:54:37+00:00

I am a newbie in writing Google Chrome Extensions. I (specifically) intended to make

  • 0

I am a newbie in writing Google Chrome Extensions. I (specifically) intended to make a browser action extension which when clicked would open all the links(URLs) on a page resulting when we Google Search any topic.
Till now I’m able to make something which highlights and alerts(javascript alert function ) the links present on any webpage.
The manifest.json and the script file required are given below:-

manifest.json==>

{
"name": "Highlight then alert.",
"description": "Highlight and alert links on a webpage.",
"version": "1.1",
"background": {
"scripts": ["write.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "highlighter",
"default_icon": "highlight_16x16.png"
},
"manifest_version": 2
}

write.js==>

chrome.browserAction.onClicked.addListener(function(tab) {

var action_url1 = "javascript:(function()
{for(i=0;i<document.links.length;i++)alert(document.links[i]);})();";

var action_url2 = "javascript:(function()
{for(i=0;i<document.links.length;i++)document.links[i].style.backgroundColor='#F00';})();";

chrome.tabs.update(tab.id, {url: action_url1});
chrome.tabs.update(tab.id, {url: action_url2});
});

Right now, I am writing a simple inline javascript code , storing them in different variables as shown and then passing them into the Chrome Object method
– chrome.tabs.update() to perform the the highlight and alert operation.
I need to figure out a way to perform the same operation by writing an absolute javascript function rather than passing through a variables.
Suggestions ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Little bit unsure exactly what you want, but my guess is you want a way of injecting the code your testing on a Browser Action click without that bookmarklet style your doing right now.
    If so, this is how I do it…
    manifest.json 

    {
  "name": "Testing from a PopUp",
  "version": "1.0",
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "browser_action": {
      "default_title": "Inject Test Script",
      "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 

    log = function() {
    for(i = 0; i < document.links.length; i++) console.debug(document.links[i]);
}

highlight = function() {
    var links = document.querySelectorAll('div[id="search"] ol li h3 a');
    for(var i = 0,length=links.length>10 ? 10 : links.length; i < length; i++) links[i].style.backgroundColor = '#F00';
}

log();
highlight();

    The bit you should look up is executeScript
    http://developer.chrome.com/extensions/tabs.html#method-executeScript
    Personally I like this way for testing little bits before turning them into content scripts.

    • 0