CODEWITHSUNDEEP
javascriptfirefox-addon-webextensions
Noobrammer
Noobrammer

Reputation: 61

Firefox Web extension. Accessing popup content in content script

Directories

----MyExtension
     |----popup.html
     |----popup.js
     |----content.js
     |----background.js
     |----manifest.json

mainfest.json

{
"manifest_version": 2,
 ...........
"content_scripts": [
  {
   "matches": ["<all_urls>"],
   "js": ["content.js"]
  }
 ],
 "browser_action": {
  "default_title": "Practice",
  "default_popup": "popup.html"
 },
"permissions": [
 "<all_urls>",
 "tabs",
 "storage",
 "activeTab"
],
"background": {
   "scripts": ["background.js"]
 }
}
....

popup.html

<html>
<head> 
 ....
<script src="popup.js"></script>
</head>
<body>
 <input id="status" type="chckbox">
</body>
</html>

popup.js

$(document).ready(function(){
  $on = $("#status");
  //sends the settings to background to save it
  $on.on("click",function(){
    $obj = {"on":$on.prop("checked")}
    browser.runtime.sendMessage($obj);
    console.log("sending....");

  })
 })

What im trying to do is simply send a message to background script if the check box in popup.html is checked. The problem is I cannot access the browser namespace in popup.js because its not content script or background script. And i cannot access the check box from the content scrip as it not linked to popup.html (if its linked i get reference error browser is not defined. I've tried countless google searches and spent hours reading web extension docs still cannot find an answer how to go around it any help appreciated.

Upvotes: 4

Views: 1896

Answers (1)

konrados
konrados

Reputation: 1141

I have good news for you - you can access the browser namespace in your browser action poupus, otherwise they would be pretty useless :)

Which means that something else is broken.

First, if you didn't do it yet, open 'browser toolbox' with Ctrl+Shift+Alt+I to see that you probably have a bit different kind of error there.

Then include this in your background.js :

function handleMessage(request, sender, sendResponse) {
  console.log("Message from somewhere: ", request);
}
browser.runtime.onMessage.addListener(handleMessage);

To actually read the message.

See:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction

JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via messages.

Edit, unrelated:

$on = $("#status");

You do realize that by doing so you refer to/create a global variable '$on', right? Did you mean:

var $on = $("#status");

?

Upvotes: 4

Related Questions