Chrome extension to Firefox extension - javascript

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>"
]
}

Related

Could not establish connection error when sending message from content script to background script in google chrome extension

When I send a message from content to background, I am getting this error in the content script log (chrome console log):
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
In the service worker log, nothing is being logged when I send message fronm content. Below are my backgroundScript, contentScript, and my manifest.json. I am using manifest v3.
backgroundScript.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log('request: ', request);
});
contentScript.js
chrome.runtime.sendMessage({ greeting: 'hello' });
manifest.json
{
"manifest_version": 3,
"name": "Chrome Extension with React & Webpack",
"description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
"options_page": "options.html",
"background": { "service_worker": "background.bundle.js" },
"action": {
"default_popup": "popup.html",
"default_icon": "icon-34.png"
},
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"icons": {
"128": "icon-128.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
"js": ["contentScript.bundle.js"],
"css": ["content.styles.css"]
}
],
"host_permissions": ["http://*/"],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
"resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
"matches": []
}
]
}

Chrome Extension: How to add custom JS and CSS into a website

I'd like to develop a chrome extension and add my custom CSS and JS;
I have these Two files:
manifest.json
{
"name": "Block request",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}],
"permissions": [
"webRequest",
"webRequestBlocking",
"<all_urls>"
]
}
content_script.js
if (window.location.hostname = "w3schools.com") {
alert("Hello");
console.log("Hi console");
}
I added this extension to the Chrome, but when I refresh every page I got alert message;
How can I solve this issue?
Is my coding correct?

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?

JS - Chrome Extension - addEventListener('copy') not working

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);

Chrome extension background.js file reload

EDIT
My chrome extension calling an api service in the background.js file and i can get the data. But after closing the browser window, i cant get the data from the api service in background.js file. It showing null value. When go to the chrome://extensions/ and reload the extension I can get the data.
When close the browser window, the data fetched is being reset and when open the browser, data not fetching. Data can be fetched from the api only after reloading the extension.
Why happening so. Does any one have an idea about this?
This is my manifest.json file
{
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"name": "Test",
"short_name": "Test",
"description": "Test",
"version": "3.0.0",
"background": {
"scripts": [
"build/background-bundle.js"
]
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"cookies",
"storage",
"activeTab",
"http://*/",
"https://*/"
],
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"build/content-bundle.js"
],
"run_at": "document_end"
}],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js https://api.algorithmia.com/v1/algo/algo://nlp/SummarizeURL/0.1.1; object-src 'self'"
}
You can't reload the background file based on anything other than reopening the browser or reloading the extension manually. What you should instead do is have a content script tell background.js to run getTaxonomyList again when the user log in happens.
background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.userLoggedIn) {
getTaxonomyList().done(function(list) {
sendResponse(list);
});
}
})

Categories