0

i am using the following codes to send a variable/message from the popup toolbar to the content scripts. however, i am not able to retrieve anything from the content scripts. When i send 'asdf' over to the content scripts, i am able to see 'undefined' found in the console. Please help, i have tried to follow a chrome extension answer but nothing seems to work. I am working with firefox webextension instead of chrome extension.

manifest.json

{
  "manifest_version": 2,
  "name" : "FPV",
  "version" : "1.0",

  "content_scripts":[
    {
      "matches": ["http://www.*.com/*","https://www.*.com/*"],
      "js": ["jquery-3.1.1.min.js","CalculatePost.js"]
    }
  ],

  "permissions": [
    "activeTab"
  ],

  "browser_action": {
      "browser_style" : true,
      "default_icon": "icons/border-48.png",
      "default_title": "FPV",
      "default_popup": "popup/Toolbar.html"
  },

  "background":{
      "scripts" : ["background.js"]
  }}

popup (Toolbar.html)

<html>
  <head>
    <link rel="stylesheet" href="Toolbar.css"/>
    <script src="Toolbar.js"></script>
  </head>

<body>
  <div> <input type="text" id="AccessToken" placeholder="Access Token" ></input> </div>
  <div class="button CalculatePost"> RUN </div>
</body>
</html>

popup js (Toolbar.js)

    if (e.target.classList.contains("CalculatePost")) { //function to refresh page
      //var AccessToken = document.getElementById('AccessToken').value;
      browser.tabs.executeScript(null, {
             file: "/CalculatePost.js"
       }, function(){
             //browser.tabs.sendMessage(null, AccessToken);
             //trying to pass a data from html to the content scripts
               browser.tabs.sendMessage(null, 'test');
       });
}}

content scripts (CalculatePost.js)

var received;
browser.runtime.onMessage.addListener(function(message, sender, sendResponse) {
      received = message;
});
console.log(received);
Community
  • 1
  • 1
jona
  • 592
  • 1
  • 4
  • 16
  • 1
    See the duplicate for complete info. In this specific case, you are passing `null` instead of a `tabId` to [`tabs.sendMessage()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/sendMessage). Unlike [`tabs.executeScript()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript), the `tabId` is not optional for `tabs.sendMessage()`. You will need to obtain the tab ID for the active tab in the current window from [`tabs.query()`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query). – Makyen Jan 17 '17 at 16:27
  • thank you for your help, after several tries, i finally get things done, sorry for posting duplicated post – jona Jan 18 '17 at 12:24
  • In this case, you were probably hampered in finding a duplicate by that duplicate not having the [tag:firefox-webextensions] tag. Originally, it was for [tag:google-chrome-extension]. In reading your question, I realized that I would answer a generic version of your question with the same text and examples. Once I saw your question, I updated my answer to that question to include all of the links to MDN, changed some text to cover both Chrome and Firefox and updated the question to include the [tag:firefox-webextensions]. Thus, your question definitely has significant benefit to the site. – Makyen Jan 18 '17 at 23:21
  • yeah, thanks for all the help you provided. As i'm very new to browser extension, i have chosen to develop in the MDN platform as it's written it will be the common extension in the future. However, most extension currently are dominated by Chrome as the number of users in Chrome are generally more than Firefox. hehe, thanks a lot for your help :) – jona Jan 21 '17 at 03:31
  • While Promises are an important technology with which you should become familiar, I recommend that you write your extension using the `chrome.*` APIs and callback functions rather than the `browser.*` APIs using Promises. The `chrome.*` APIs will work on Chrome and Firefox, which together have a *far* larger installed base than anything else. In addition, it is relatively easy to write shims to go from code using callbacks (`chrome.*)` to APIs using Promises (`browser.*`) wich can be used when you desire to run your extension on other, much smaller installed base, platforms. – Makyen Jan 21 '17 at 04:14
  • ............. OMG!!!! i didn't knew that chrome.* can actually works in Firefox, because i started my tutorial from MDN website, i though that only browser.* are available for my codes. – jona Jan 21 '17 at 04:24

0 Answers0