We Keep Coding

Error on calling Javascript APIs within Firefox extension

I am currently building a web extension and in the stage of porting between browsers. On moving from Chrome to Firefox I am coming against an issue in using the runtime.sendMessage API that allows me to talk between the content and background scripts.
The message code in the content script:
browser.runtime.sendMessage('d089938d-ba63-4c40-98ab-b8515db1bbca', { greeting: "screenshot-please" }, function (response) {
localStorage.setItem("image", response.farewell);
});
var image = localStorage.getItem("image");
The Background script:
var img = saved-image;
browser.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if(request.greeting === "screenshot-please"){
sendResponse({
farewell: img
});
}
}
);
and the manifest:
{
"description": "...",
"manifest_version": 2,
"name": "...",
"permissions": [
"find",
"tabs",
"activeTab",
"<all_urls>"
],
"applications": {
"gecko": {
"id": "..."
}
},
"background": {
"scripts": ["/JavaScript/moz-initialPopup.js"]
},
"content_scripts": [
{
"all_frames": true,
"matches": ["*://127.0.0.1:3000/*"],
"js": ["Javascript/dataGrab.js"]
}
],
"icons": {
"48": "..."
},
"browser_action": {
"browser_style": true,
"default_title": "...",
"default_icon": {
"48": "..."
}
},
"version": "1.0"
}
When in chrome (replace all instances of *browser with *chrome) this messaging system works fine. When in firefox, in the developer tools I get 'ReferenceError: browser is not defined'.
Can anyone assist me in why I would not be able to access the browser here?

Change chrome extension icon when tab or url changes

I'm working on an extension and I want the icon to change when the active tab or url changes. Here's what i have so far:
manifest.json
{
"manifest_version": 2,
"name": "Link2QR",
"description": "chrome_extension",
"version": "1.0",
"browser_action": {
"default_icon":"icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"tabs"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
content.js
if(onSupportedPageNeedChangeIcon) {
chrome.runtime.sendMessage({ "newIconPath" : "testimage.png" });
}
popup.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
chrome.browserAction.setIcon({
path: request.newIconPath,
tabId: sender.tab.id
});
});

You are handling the message in popup.js, which I suppose is running in the browser_action popup page.
popup.js thus only runs when the extension button is clicked.
You should instead handle it in background.js:
manifest.json
{
"manifest_version": 2,
"name": "test",
"version": "0.0.1",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"24": "icon.png",
"25": "icon.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
chrome.browserAction.setIcon({
path: request.newIconPath,
tabId: sender.tab.id
});
});

Chrome extension send data between panel and content script

I must admit the chrome api seems confusing to me. I'm trying to create an extension (page-action) in which the content script will send a message to the popup and vice versa.
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"offline_enabled": true,
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.stackoverflow.com/*"],
"js": ["jquery.js", "content.js"],
"run_at": "document_idle",
"all_frames": false
}],
"page_action": {
"default_title": "Test Extension"
}
}
background.js:
chrome.runtime.onMessage.addListener(function (msg, sender) {
if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
chrome.pageAction.show(sender.tab.id);
}
});
chrome.pageAction.onClicked.addListener(function (tab) {
chrome.windows.create({ url: 'popup.html', type: 'panel' });
});
content.js:
chrome.runtime.sendMessage({
from: 'content',
subject: 'showPageAction'
});
Now the tricky part: Clicking a button in the popup which will send a message to the tab with the content script, the content script will run a function processing the dom and when done send a message back to the popup.

Very simple Chrome Extension to display alert

I am trying to create a quick Chrome extension (complete beginner) and just want to display an alert whenever the icon is clicked, so I tried the following:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["bgscript.js"]
}]
}
bgscript.js
chrome.browserAction.onClicked.addListener(function(tab) {
alert('icon clicked')
});
However when I click on my icon, nothing happens! Looking at the above - can anyone spot why this wouldn't work?

In order to be notified for browser-action's onClicked event, you need a background-page (or better yet event-page), not a content-script.
Change your manifest like this:
// Replace that:
"content_scripts" : [{...}]
// with this:
"background": {
"persistent": false,
"scripts": ["bgscript.js"]
}
If you want the browser-action to invoke something on a content-script, you need to communicate throught the background-page using Message Passing (e.g. Simple one-time requests).
E.g.:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["content.js"]
}]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
/* Send a message to the active tab's content script */
chrome.tabs.sendMessage(tab.id, { action: 'saySomething' });
});
content.js
chrome.runtime.onMessage.addListener(function (msg) {
/* We received a message, let's do as instructed */
if (msg.action === 'saySomething') {
alert('something');
}
});

How can I call functions defined in a Chrome Extension from regular websites?

I'd like to make a website that is not part of the chrome plugin but rather just uses some API that the plugin exposes to it. Is this possible and if so, how do I do it? I googled this question and was unable to find anything.
I'm trying to use content scripts but nothing happens. Can someone explain what's wrong here?
manifest.json
{
"manifest_version": 2,
"name": "Hello World Extension",
"description": "This extension prints hello world.",
"version": "1.0",
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://locahost:8888/*"],
"js": ["EmotivAPI.js"]
}
]
}
EmotivAPI.js
var port = chrome.runtime.connect();
console.log("Hello?");
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
alert("recieved!");
}
}, false);
js in the webpage
window.sayHello = function () {
window.postMessage({ type: "FROM_PAGE", text: "Hello from webpage!" }, "*");
}
console.log('Emotiv extension loaded.');
}
I'm calling window.sayHello() from the console

Content Scripts can help you in this case.
The content script will be injected into a page:
"content_scripts": [
{
"matches": ["http://www.google.com/*"], // try with "http://localhost:*/*" or "http://localhost:*"
"css": ["mystyles.css"],
"js": ["content_script.js"]
}
]
If you want to inject the code only sometimes, use the permissions field instead
/* in manifest.json */
"permissions": [
"tabs", "http://*/*"
],
In you extension html file, you can then execute the script by:
chrome.tabs.executeScript(null, {file: "content_script.js"});