How to send the data entered in the menu extensions to another file

Question

I am writing an extension, made a menu to it in which the user enters some data. It is necessary to make it so that by clicking on the button (in the extension menu) these same data would be placed on the page I needed.

Here is the manifest and HTML:

{ "manifest_version": 2, "version": "1.3", "description": "", "browser_action": { "default_popup": "content/popup.html" }, "content_scripts": [{ "matches": ["https://google.com/*"], "js": ["content/content.js"], "css": ["content/qq.css"], "run_at": "document_end" }] }

 <head> <script src="content/background.js"></script> </head> <body> <input type="text" id="text"> <input type="button" id="btnForBalance" value="Send"> </body

It turns out that I need to send the data entered into the field with the send button from a file that works only from the extension menu to the file that will insert this data on the page I need. How to do it?
Help, because if I put the code that makes it into my js file, then it tries to take this data from the input on the page, and not from the extension menu.

Here is the structure:

@Deliaz is the window that appears when you click on the extension icon

Deliaz Deliaz 927 five 15 · Accepted Answer · 2017-12-26T18:31:35

Judging by your code, you are a little confused in the terminology and designation of the API for extensions.

To solve the problem you need:

popup (popup - what you call the "extension menu")
content-script

The background script is not required in this case.

Sketched a working example of the extension.

manifest.json

 { "manifest_version": 2, "name": "Test", "version": "1.0", "description": "", "browser_action": { "default_popup": "popup.html" }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content-script.js"], "run_at": "document_end" }] }

popup.html

 <html> <head> <meta charset="UTF-8"> </head> <body> <input type="text" id="data"> <button id="go">Отправить</button> <script src="popup.js"></script> </body> </html>

popup.js

 const btn = document.querySelector('#go'); const input = document.querySelector('#data'); btn.addEventListener('click', function() { const text = input.value; // Ищем активный таб в текущем окне chrome.tabs.query({active: true, currentWindow: true}, function(foundTabs) { const activeTab = foundTabs[0]; // Отправляем сообщение в content-script находящейся в этом активном табе chrome.tabs.sendMessage(activeTab.id, {text: text}); }) });

content-script.js

 chrome.runtime.onMessage.addListener(function(request) { const text = request.text; // принятое сообщение из popup'а const input = document.querySelector('#lst-ib'); // для примера используется поле ввода Google.com input.value = text; });

How it works

By clicking on Send in the pop-up, first the active tab is searched for, in order to get the id. Further to this taboo (on the received id) the message with the entered text is sent.
The content script accepts the message and inserts it into the input field.

Note:

directive "matches": ["<all_urls>"] runs the content script on all pages. I recommend to specify the URL pattern you need;
the message can be sent not only to the active tab; the chrome.tabs.query method allows finding tabs by a variety of parameters;
After installing the extension, do not forget to reload the tab on which the testing takes place in order to launch the content-script.

everything works well, the data arrives, but the question arose: is it possible to make the data remain on the page after entering the field and updating the page?
When the download is complete, simply repeat the data insertion procedure (which is also pre-saved).
@MaximBuyakov I suppose this is a topic for a separate question.

How to send the data entered in the menu extensions to another file

1 answer 1

How it works

More articles: