There is a certain site. Let's call it mysite.ru

So, I want to perform some functionality on the site and do not want to do it manually. so I wrote a JS script that ran on the page and it worked fine.

var node = document.createElement('div'); node.innerHTML = '\ <button onclick="start()" id="playBut" style="margin: 5px">play</button>\ '; document.getElementsByTagName('body')[0].appendChild(node); function start(){ // My code here };

and everything works great. But I’m tired of constantly running the code when the page is updated, so I decided to create a browser extension. Polazil on Habra and gathered that's what

  { "manifest_version": 2, "name": "MyExt", "version": "1.0.0.16", "permissions": [ "tabs", "activeTab", "https://mysite.ru/*" // Разрешить расширению обращаться к указанному адресу ], "content_scripts": [ { "matches": [ "https://mysite.ru/*" ], "js": [ "MyScript.js" ] } ], "browser_action": { "default_title": "MyExt" } }

In the MyScript.js file, just the script that I described at the beginning.

But the problem is that when the extension is launched on the site I need, the button appears, but the start() function is not executed. I see in the console

Uncaught ReferenceError: start is not defined at HTMLButtonElement.onclick

  • Well, the start function is not in the document, but in the extension. Use normal handlers using .addEventListener - etki
  • @Etki, did not understand a little. The function is not in the extension, but in the file that the extension connects to sites that match matches. At least I thought so. Can you tell us more about this EventListener? - iRumba
  • @Etki, there’s actually not just handling a click ... a little more complicated there. The start() function starts the F() function, which starts itself recursively. That is, even if I assign my function through this listener, then function F will be lost in the same way. so I need to give the injection exactly - iRumba
  • not lost. start will see all its context - etki
  • @Etki, well, well, if so ... so what do you need to do? - iRumba

1 answer 1

Now you offer the browser something like this:

"When you click on the button, find the function contained in the variable start and execute it"

Since the start function is in the extension files, it is not in the document in the context of which the search is performed, so the browser cannot find anything.

The way out of this is quite simple - instead of forcing the browser to access a function by name, just hang it with a handler, passing it over and getting rid of these problems.

 var button = document.getElementById('playBut'); button.addEventListener('click', start, false);

In this case, the browser will immediately receive the function that it needs to call when the button is pressed, and it, being in the extension files, will be executed in the context of this extension, allowing you to access other extension functions.

  • Sorry for the dullness, but in the F() function there is such a string var obj = $.parseJSON(http.responseText); which does not work. I suppose that's because there is no jQuery in the context of the function. But on the site itself it is connected. How to be in this case? - iRumba
  • Is it possible to just embed all my scripts on the site, as I did using javascript:(MY CODE) in the address bar or via the debugger console? Why is it so difficult to do with extensions? - iRumba
  • I don’t know how to connect jquery, but the question should be common. you can try injecting your script with a new <script> on the page - etki