Chrome extension, work with DOM

Question

I have never written an extension for Chrome. I read some materials from Google. Not much help, the more bad I know JS.

In general, what I need. But a simple action is needed: I open the site, log in, click on the extension button, activate it. The extension periodically timer on this site clicks on the Tab in the widget to which the click event is attached, which pulls the ajax request and receives data from the server and updates the contents of the Taba. After which, the extension should check if something appeared in Taba. Tab is a tab in the widget. If something appears, it pulls the external url.

How to organize it correctly? What to register in the manifesto? How to get out of the extension to the DOM site?

In principle, through devtools I can click on the taboo via: document.getElementsByClassName('tab')[0].click() , how can I pull it from the extension periodically?

Accepted Answer · 2016-04-19T08:06:57

To reach the extension to the DOM site, you need a content script (all work with the DOM is done there). In the manifest, specify which pages to load it into, like this: manifest.json :

 { /* тут бла-бла-бла имя автора версия и прочие тырыпыры, https://developer.chrome.com/extensions/manifest тут все достаточно подробно описано */ "permissions": [ "http://ваш.сайт.цель/*" ], "content_scripts":[ { "matches": [ "http://ваш.сайт.цель/*" //https://developer.chrome.com/extensions/content_scripts#match-patterns-globs ], "js": ["content_script.js"] } ] }

To activate an extension by clicking the extension button, you need a popup:
add to the manifest

 "browser_action":{ "default_popup":"popup.html" },

In the body of popup.html, write a code that will save somewhere the fact that the application is activated. There are a lot of options, as far as I understand your task, it will be enough just to send a message to content_script, like this:

popup.html :

 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="popup.js"></script> </head> <body>Hello Chrome World:)</body> </html>

popup.js :

 chrome.runtime.sendMessage('start');

content_script.js :

 chrome.runtime.onMessage.addListener(function(request,sender,callback){ if(request=='start'){ setInterval(function(){ document.getElementsByClassName('tab')[0].click() },228); } });

But you can do this in a number of other ways, for example, using the chrome.storage.local or background script , which will work until you close the browser, remove or disable the extension.

Error for popup.html: "Refused to execute inline script error:" script-src 'self' blob: filesystem: chrome-extension-resource: ". Either the 'unsafe-inline' keyword , a hash ('sha256-jIJZ5Xr7KFK7'), or a nonce ('nonce -...') is required to enable inline execution. "
Upnul the answer, it is necessary to take out the script from popup.html in a separate file

Chrome extension, work with DOM

1 answer 1

More articles: