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?
Related
I have developed a Chrome extension
On Chrome everything works as I expect
I am now trying to migrate the extension to Firefox
It tells me that the developed extension is compatible with Firefox (I used this link https://www.extensiontest.com/)
However, I have some problems
I have a devtools_script ("VariableGrid.js") which sends messages to the ContentScript via chrome.tabs.query
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(chrome.devtools.inspectedWindow.tabId, { from: "FromExample", message: "MessageExample" }, (response) => {
......
});
});
My ContentScript replies to the message like this
chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
......
});
On Firefox chrome.tabs is undefined
I tried using browser.tabs but it's the same
I read that tabs can only be used on background script
Why does this work on my Chrome extension and not on Firefox?
If I tried to move that piece of code to the background script I would still have a problem:
chrome.devtools.inspectedWindow.tabId is undefined
my Manifest is like this
{
"browser_specific_settings": {
"gecko": {
"id": "addon#example.com",
"strict_min_version": "42.0"
}
},
"name": "xxxx",
"description": "xxxx",
"version": "0.0.0.1",
"browser_action": {
"default_popup": "Popup.html"
},
"manifest_version": 2,
"background": {
"scripts":["jquery.min.js", "background.js"],
"persistent": true
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "Content.js"]
}
],
"web_accessible_resources": [
"Content.js"
],
"devtools_page": "Devtools.html",
"permissions": [
"webRequest",
"webRequestBlocking",
"tabs",
"activeTab",
"notifications",
"storage",
"http://*/",
"https://*/",
"<all_urls>"
]
}
I want to my chrome extension change icon when there is certain string contained in current tab's url. I am a newbie on chrome extension design, so I test some basic message sending functions first. But the setIcon function does not work, and no error message shows in extension.
Here is my manifest file:
{"permissions" ["identity","identity.email","tabs","activeTab","http://34.204.12.200:5000/"],
"short_name": "React App",
"name": "React Extension",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_title": "React Ext",
"default_icon" : {
"512": "icon1.png",
"512": "icon2.png"
}
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
],
"version": "1.0"
}
my contentScripts:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: true,
});
my background.js:
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "updateIcon") {
if (msg.value===false) {
chrome.pageAction.setIcon({
tabId: sender.tab.id,
path: {"512":"icon2.png"}
});
//alert(msg received)
} else {
//tabId: sender.tab.id,
chrome.pageAction.setIcon({
tabId: sender.tab.id,
path: {"512":"icon1.png"}});
}
}
});
both my icon1 and icon2 are 512*512, and they are in same directory as manifest.json.
my chrome extension icon always show icon2, it seems that both my background.js and contentScript not working. Does anybody know why?
I've been trying to make Firefox Extension which needs to have an ability for user to record a voice message.
I've made a web page which does work, but when I put the same code in the extension (with all the proper manifest.json changes), it doesn't work. It simply doesn't ask user for access to microphone.
I went through extension examples on Firefox site but I can't find the solution.
How can the extension, if it can, access users microphone?
Code:
window.addEventListener('load', initAudio);
And the initAudio function:
function initAudio() {
console.log("initAudio");
if (!navigator.getUserMedia)
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia;
if (!navigator.cancelAnimationFrame)
navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame;
if (!navigator.requestAnimationFrame)
navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame;
console.log("initAudio");
navigator.mediaDevices.getUserMedia(
{
"audio": {
"mandatory": {
"googEchoCancellation": "false",
"googAutoGainControl": "false",
"googNoiseSuppression": "false",
"googHighpassFilter": "false"
},
"optional": []
},
}, gotStream, function (e) {
console.log('Error getting audio');
$("#controls").css("background", "red");
console.log(e);
});
}
I don't get console output
Error getting audio
But I also don't get the console output from gotStream function.
Later, I have an HTML object which triggers the recording process:
<img id="record" src="./res/icons/mic.png" class="">
with it's accompanying Javascript code:
$(document).ready(function () {
$("#record").click(function () {
console.log("trigerred", this);
toggleRecording(this);
});
});
function toggleRecording does get trigerred properly, but it can't work since Recorder object is not initalized (it gets initalized in gotStream function).
Here is the manifest.json file:
{
"manifest_version": 2,
"name": "Speech",
"version": "1.1",
"description": "blank desript",
"icons": {
"16": "popup/res/icons/icon16.png",
"32": "popup/res/icons/icon32.png",
"48": "popup/res/icons/icon48.png",
"128": "popup/res/icons/icon128.png"
},
"permissions": [
"storage"
],
"browser_action": {
"default_icon": {
"32": "popup/res/icons/icon.png"
},
"default_title": "Speech",
"default_popup": "popup/popup.html"
},
"content_scripts": [
{
"js": [
"popup/res/script/jquery-3.2.1.js",
"popup/res/script/audiodisplay.js",
"popup/res/script/recorder.js",
"popup/res/script/recorderWorker.js",
"popup/res/script/resampler.js",
"popup/res/script/main.js"
],
"matches": [ "<all_urls>" ],
"match_about_blank": true,
"all_frames": true
}
],
"content_security_policy": [
"script-src 'unsafe-inline'"
]
}
I am trying to develop a chrome extension however while trying to add an EventListener on the copy action it does not work (though supported by the browser because it is working on fiddle).
here are my different files.
manifest.json
{
"manifest_version": 2,
"name": "Bla",
"description": "bla",
"version": "1.0",
"browser_action": {
"default_icon": "camera.png",
"default_title": "bla"
},
"background": {
"page": "background.html"
},
"content_scripts" : [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["oncopy.js"]
}
],
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"clipboardRead",
"clipboardWrite"
]
}
oncopy.js
document.addEventListener("copy", function() {
alert('copied')
}, true);
The alert never pops up.
I also tried with a similar code inside a background.js file called by background.html but didn't work either... Any ideas ?
Try this
document.addEventListener('readystatechange', function(evt) {
if (evt.target.readyState === "complete") {
document.addEventListener("copy", function() {
alert('copied')
}, true);
}
}, false);
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed