0

I'm new with chrome extensions (and javascript to be honest) and have managed to create a simple script which copies several DOM elements from the page and kicks up a page containing those elements on page load. It all works fine, however the page where the data is sourced from can change based on user input - ie if they apply some kind of filter.

Rather than running the script when the page loads initially, I would like to be able to hit the extension icon and have this run once. So a user could apply their filter, and run the extension against the page and get the new info in a new popup window.

in manifest file:

"content_scripts": [
  {
    "matches": ["https://www.oddsmonkey.com/*"],
    "js": ["content.js"],
    "all_frames": true
  }
  ],
"background": {
"scripts": ["background.js"]

In background.js:

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

    alert("Hello! I am an alert box!!");

});

Obviously all that happens at button click at the moment is I get an alert box.

I've done a lot of looking around and can't seem to find a way of getting the background.js page (which I understand is required for the button click) to execute content.js. I see the concept of messaging, but I don't need to give anything, or get anything from the content script, I just want it to run!

Hopefully a simple one for someone to answer.

Cheers

reti
  • 23
  • 2
  • To access the web page you need a [content script](https://developer.chrome.com/extensions/content_scripts), see also [How to access the webpage DOM rather than the extension page DOM?](//stackoverflow.com/q/4532236) and probably [Is there a JavaScript/jQuery DOM change listener?](//stackoverflow.com/a/39508954) – wOxxOm Feb 23 '17 at 10:07
  • @wOxxOm I do have a content script (and this is what already works fine). I just need it to run again when the user clicks the button! Detecting DOM changes and using messages seem overly complicated for what I suspect is a very simple task. – reti Feb 23 '17 at 11:15
  • If your user interaction *begins* with the user clicking a `browserAction` button, then the content script should be injected with [`chrome.tabs.executeScript()`](https://developer.chrome.com/extensions/tabs#method-executeScript) instead of a *manifest.json* `content_script` entry. That way your content script does not burden the browser by being injected into every page just to wait to be used. Using `chrome.tabs.executeScript()`, the script can begin functioning when it is injected with [the data, if any is needed, that has been passed to it](http://stackoverflow.com/a/40815514/3773011). – Makyen Feb 23 '17 at 19:08
  • I ended up actually using MutationObserver as per @wOxxOm's suggestion. It seems a much more elegant solution as the the content of my chrome extension is continually updated as the filters are applied. Thanks for your suggestion. – reti Feb 28 '17 at 14:49

1 Answers1

0
chrome.browserAction.onClicked.addListener(function(tab){
    chrome.tabs.executeScript( tab.id, { file: 'content.js' })
});
// this needs an "activeTab" permission.
Makyen
  • 31,849
  • 12
  • 86
  • 121
Vlas Bashynskyi
  • 1,886
  • 2
  • 16
  • 25
  • While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Makyen Feb 23 '17 at 19:09
  • For whatever reason this I couldn't get this to work as desired. Clicking the icon didn't result in the java script being run despite this being a common solution to my problem. – reti Feb 28 '17 at 14:48