Fill forms with a data from popup.html

Question

I have been trying to create an extension that fills a form with data from a popup, I'm a bit confused regarding the use of "background" and "content" files, I don't think I need one. Here is my code:

Manifest:

 {
  "name": "Browser action for Form",
  "description": "Fill a form with data from the popup",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_title": "Form Test",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "content_scripts": [
    {
       "matches": ["https://the-site-with-a-form.com/*"],
       "js": ["jquery-3.1.1.min.js", "content.js"]
    }
  ],
  "manifest_version": 2
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Form</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <form>
        <textarea id="txtArea"></textarea>
        <input type="button" id="btn1" value="Run">
    </form>
  </body>
</html>

popup.js

function click(){
var text = document.getElementById("txtArea")
chrome.tabs.sendMessage(
      tabs[0].id,
    {from: 'popup', subject: 'DOMInfo',data1: text});

}

content.js

chrome.runtime.onMessage.addListener(function (msg, sender, response) {
if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
//Fill the form with the data of the popup
document.getElementById("The textbox from the form").value = msg.data1;
}
});

what is wrong in the code? Thanks!

score 0 · Accepted Answer · answered Nov 01 '16 at 13:06

0

Please learn to debug extension popups. If you did, you would see an informative error message.

With that in mind, tabs in your popup code doesn't come from anywhere - so your code there stops with an error. Clearly, that part is ripped out of context (of a tabs.query call, most likely). Note that if your intent is to message the currently active tab, you can just skip the first argument of sendMessage entirely.

You defintiely do need a content script, since it's the only part of an extension that can interact with a webpage's form. Recommended reading: How do all types of Chrome extension scripts work?

answered Nov 01 '16 at 13:06

Xan

74,770
16
179
206

Thanks! indeed the problem was in the "tabs" argument in the "sendMessage", fixed it: var activeTab = tabs[0]; chrome.tabs.sendMessage(activeTab.id, {"message": "s........ now works! thanks again! – 123345566i Nov 02 '16 at 08:52
If you have your own working solution, just post it as a separate answer. – Xan Nov 02 '16 at 08:52

score 0 · Answer 2 · answered Nov 02 '16 at 08:58

Here is the popup.js with the fixed "tabs" argument

function click(e) {

    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
        var activeTab = tabs[0];
        var text = document.getElementById("txtArea").value;
        chrome.tabs.sendMessage(activeTab.id, {from: 'popup', subject: 'DOMInfo',data1: text});
       });  
   window.close();
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('submitBtn').addEventListener('click', click); 
});

Fill forms with a data from popup.html

2 Answers2