Monday, January 1, 2018

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

By Hường Hana 6:30 AM , , Leave a Comment

I'm writing an extension, I made a menu to it in which the user enters some data. It is necessary to make so that on a click on the button (in the menu of expansion) these data.

Here is how it must works: background.js is the file that is responsible for js in the extension menu. content.js is the file that is responsible for making changes to the DOM on the sites.

document.getElementById('btn').onclick = function() {    var first = document.getElementById('first').value;    var second = document.getElementById('second').value;    //sending in content.js    chrome.extension.sendMessage('hello');  }
<head>    <script type="text/javascript" src="content.js"></script>    <script type="text/javascript" src="background.js"></script>  </head>  <input type="text" id="first">  <input type="text" id="second">  <input type="button" id="btn" value="send">

content.js Getting data: 

chrome.extension.onMessage.addListener(function(request){     if(request=='hello'){         console.log('1. Get: ', request);     } });

But from background.js i get nothing.

Here is manifest.json

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

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

Here is the structure:

enter image description here

1 Answers

Answers 1

Ok, there seems to be a couple of n00b issues here:

  • background.js is a script that runs in the background of all tabs/pages. (The "background" section in the manifest.json specifies this). PS: The way to debug the background.js is to open chrome's extension page (chrome://extensions/) and click on "Inspect Views: background page" from there. Typically, this is where most of your code would be.

  • content.js will automatically be inserted into all google.com pages, according to your manifest.

  • popup.html and it's code only exists as long as the popup is visible. It's typically very light, with little code. So, in your popup.html, remove the two existing <script> entries you have, and just use a single script, (typically popup.js):

    <script type="text/javascript" src="popup.js"></script>

  • When sending info from the popup (or background) to the current tab (in your case it's going to be google.com only) you use the general code:

    // Get the current tab & tell it to do something chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {     var currentTab = tabs[0];     var id = currentTab.id;     chrome.tabs.sendMessage(id,             { action: 'foo', data:... },              response => { console.log('some response from content.js is:' + response); });  });

    but to send a message to the background (from a page or your content script inside google.com), you'd just use this chrome.runtime.sendMessage({action:'foo', data:...});

So, your code should probably be something like:

popup.html

<head>   <script type="text/javascript" src="popup.js"></script> </head> <body>...

popup.js:

document.getElementById('btn').onclick = function() {   var first = document.getElementById('first').value;   var second = document.getElementById('second').value;   //sending in content.js   var foo_data="I am foo";      // Get the current tab & tell it to do something   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {         var currentTab = tabs[0];         var id = currentTab.id;         chrome.tabs.sendMessage(id,                 { action: 'hello', foo:foo_data, first:first, second:second },                  response => { console.log(response); });      });  }

background.js

(nothing)

content.js

chrome.runtime.onMessage.addListener(function(request,sender, sendResponse){     if(request.action=='hello'){         console.log(request.foo + ' ' request.first + ' '  + request.second);         sendResponse('I got foo!');     } });

If it's any help, I've a tiny project that I use to get started on webextension projects here: https://github.com/cmroanirgo/webextension-template. It's got some code to help with making it work cross browser (Firefox, Opera & maybe Edge)

I hope this helps.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment