Chrome extension to change DOM with a button in extension popup

Question

i am completely new to chrome extension development. I am trying to change the DOM (append data to active webpage) when clicked on a button in the extension popup. How is this possible.

the manifest file

{
  "manifest_version": 2,

  "name": "test 2",
  "description": "test ext 2",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["jquery.min.js", "main.js"]
    }
  ],
  "permissions": [
   "activeTab"
   ]
}

suppose if the popup.html file is

<!doctype html>
<html>
  <head>
    <title>test extension 2</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <a id="button">button</a>
  </body>
</html>

and when i click on #button, i want to execute some jquery code in main.js file which will append some data to the active webpage.

Thank you.

Possible duplicate of [Chrome Extension - Message Passing from Popup to Content Script](http://stackoverflow.com/questions/6108906/chrome-extension-message-passing-from-popup-to-content-script) — Haibara Ai, Jul 25 '16 at 06:44
@HaibaraAi If my question was closed with such a duplicate, I wouldn't know what to do. It's only a small part of the solution. — Xan, Jul 25 '16 at 14:01
Thank you for the link provided. it helped to get an idea, but now i am looking to incorporate a button in popup.html and add a listener which will change the DOM of the active page. I was looking for something like this, [link](http://stackoverflow.com/questions/11996053/detect-a-button-click-in-the-browser-action-form-of-a-google-chrome-extension) — Arun Thomas, Jul 25 '16 at 14:14

score 14 · Accepted Answer · answered Jul 26 '16 at 00:34

Use Programmatic injection. You could register event listener in popup.js and call chrome.tabs.executeScript to inject some js code/file to current active tab. This requires host permissions.

popup.js

document.getElementById('button').addEventListener('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true}, function(activeTabs) {
        // WAY 1
        chrome.tabs.executeScript(activeTabs[0].id, { code: 'YOUR CODE HERE' });
    });
});

Use Message Passing. You could call chrome.tabs.sendMessage in popup.js and listen to that via chrome.runtime.onMessage in content.js.

popup.js

// WAY 2 (Replace WAY1 with following line)
chrome.tabs.sendMessage(activeTabs[0].id, { action: 'executeCode' });

content.js

chrome.runtime.onMessage.addListener(function(request) {
    if(request.action === 'executeCode') {
        // YOUR CODE HERE
    }
});

Use Storage. You could call chrome.storage.local.set in popup.js and listen to storage change in content.js via chrome.storage.onChanged.

popup.js

// WAY 3 (Replace WAY1 with following line)
chrome.storage.local.set({ action: 'executeCode' });

content.js

chrome.storage.onChanged.addListener(function(changes) {
    var action = changes['action'];
    if(action.newValue === 'executeCode') {
        // YOUR CODE HERE
    }
});

Thank you Haibara. I had checked a few documentations. but i was not getting a proper idea, but this helped — Arun Thomas, Jul 26 '16 at 05:36

Chrome extension to change DOM with a button in extension popup

1 Answers1

Linked