My chrome extension is not working on Edge - google-chrome-extension

I have a piece of code which works fine on chrome. I did the following step mentioned here.
I'm able to load it properly, but the code doesn't run properly.
In the background console only the url gets printed, no other consoles or alerts work.
Please any help will be appreciated ! Please
window.onload = function() {
console.log("blah1");
var port = browser.runtime.connect({name: "knockknock"});
port.postMessage({request: "sendData"});
port.onMessage.addListener(function(msg) {
console.log("blah2");
if(msg != null){
}
});
}
var sendData = null;
var url = null;
browser.webRequest.onBeforeRequest.addListener(function(details) {
if(details != null && sendData == null && details.url.includes("www")){
console.log(details.url);
sendData = details.url;
}
},
{urls: ["<all_urls>"]},
["blocking", "requestBody"]
);
browser.runtime.onConnect.addListener(function(port) {
console.log("inside addListener")
port.onMessage.addListener(function(msg) {
if (msg.request == "sendData"){
console.log("sendData : ", sendData);
port.postMessage(sendData);
}else if (msg.answer == null){
sendData = null;
}
});
});
My manifest file
{
"manifest_version": 2,
"name": "test",
"version": "1.0.0",
"author": "medha",
"icons": {
"48": "esso.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [ "webRequest", "webRequestBlocking", "webNavigation", "tabs", "<all_urls>", "storage"],
"-ms-preload": {
"backgroundScript": "backgroundScriptsAPIBridge.js",
"contentScript": "contentScriptsAPIBridge.js"
}
}

I tested and found that if we remove window.onload then the extension will work well in Edge Legacy. It will print all the consoles.
You could set content.script run at document_idle. It's equal to window.onload and you do not need to listen for the window.onload event. For more detailed information, you could refer to this article.
My manifest.json is like below:
{
"manifest_version": 2,
"name": "test",
"version": "1.0.0",
"author": "medha",
"icons": {
"48": "esso.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"run_at": "document_idle",
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [ "webRequest", "webRequestBlocking", "webNavigation", "tabs", "<all_urls>", "storage"],
"-ms-preload": {
"backgroundScript": "backgroundScriptsAPIBridge.js",
"contentScript": "contentScriptsAPIBridge.js"
}
}

Related

Chrome Extension MV3: Uncaught ReferenceError: Worker is not defined

I am trying to convert from MV2 to MV3 and I am getting this error from the service worker error logs:
Service worker registration failed
Uncaught ReferenceError: Worker is not defined
Here is my MV3 settings:
`{
"manifest_version": 3,
"name": "Blah",
"description": "Blah",
"version": "1.0.0",
"minimum_chrome_version": "93",
"action": {
"default_icon": "logo.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "js/background.js"
},
"content_scripts": [
{
"matches": ["file://*/*", "http://*/*", "https://*/*"],
"js": ["js/content.js"],
"run_at": "document_start",
"all_frames": true
}
],
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; worker-src 'self'"
},
"permissions": [
"scripting",
"clipboardWrite",
"tabs",
"activeTab",
"notifications",
"webRequest",
"proxy",
"storage",
"unlimitedStorage",
"alarms"
],
"host_permissions": [
"http://*/",
"https://*/",
"<all_urls>"
],
"web_accessible_resources": [
{
"resources": ["js/injected.js"],
"matches": ["*://*/*"]
}
]
}`
And here is the backgound script:
import { browser } from "webextension-polyfill-ts";
import { Request } from "#src/types";
import Extension from "./extension";
const app: Extension = new Extension();
try {
app.initialize().then(async () => {
// eslint-disable-next-line #typescript-eslint/no-unused-vars
browser.runtime.onMessage.addListener(async (request: Request, _) => {
try {
const res = await app.handle(request);
return [null, res];
} catch (e: any) {
return [e.message, null];
}
});
} catch (error) {
console.log("Error in backgound!!1");
}
Is there any missing configs in the background script or the MV3 json file?
It is an old bug when using nested web-worker with chrome extensions which is not supported yet: https://bugs.chromium.org/p/chromium/issues/detail?id=31666
I found the solution here: https://stackoverflow.com/a/33991381/9058556
It was simply installing https://github.com/dmihal/Subworkers package and importing it in my background.js script at the top.
Thanks #norio-yamamoto for trying to help me with this.

Can't load html file from Chrome extension file system

I'm trying to load an HTML file from the file system of my Chrome extension. I've added "modal.html" as a web accessible resource in my manifest:
{
"name": "Test Extension",
"action": {},
"manifest_version": 3,
"version": "0.1",
"description": "Just learning for now",
"permissions": [
"activeTab",
"scripting",
],
"background": {
"service_worker": "background.js"
},
"web_accessible_resources": [
{
"resources": [ "modal.html" ],
"matches": [ "https://mypage.co.uk/*" ]
}
]
}
My background.js file tries to load modal.html with an xhr:
function initPage() {
let node = document.createElement("div");
node.setAttribute("id", "mySpecialId");
document.body.appendChild(node);
var xhr = new XMLHttpRequest();
xhr.open("GET", chrome.runtime.getURL('modal.html'), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById("mySpecialId").innerText = xhr.responseText;
}
}
xhr.send();
}
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: initPage
});
});
I get the error:
Denying load of chrome-extension://lmdjgmkmficfccbahcpgnmaplajdljid/modal.html. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
I'm sure this is a really basic problem, but I just can't figure it out.
I got this working by adding the use_dynamic_url key in the web_accessible_resources declaration:
"web_accessible_resources": [
{
"resources": [ "modal.html" ],
"matches": [ "https://www.mypage.co.uk/*" ],
"use_dynamic_url": true
}
]
I don't yet understand why this worked though!
Edit: This was a bug in Chrome. The original code was correct and worked after a reboot.

chrome tabs event don't work on background js

in my permission
"background": {
"scripts": [ "request.js" ]
},
"browser_action": {
"default_icon": "uefa.png",
"default_popup": "popup.html",
"default_title": "as2"
},
"content_scripts": [ {
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"description": "moving",
"manifest_version": 2,
"name": "as2",
"permissions": [ "http://*/*", "https://*/*", "tabs", "webRequest", "webRequestBlocking", "storage", "webNavigation", "\u003Call_urls>", "cookies" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "1.4",
and request.js
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab)
{
alert("onUpdated"+tab.url);
});
chrome.tabs.onActivated.addListener(function(activeInfo) {
alert("onActivate"+tab.url);
});
chrome.windows.getAll({populate:true},function(windows)
{
windows.forEach(function(window)
{
window.tabs.forEach(function(tab)
{
if(tab.url.indexOf("https://www.bet-at-home.com/en/sport/live/") != -1)
{
alert("ssdsf::"+tab.id);
}
});
});
});
it is works well!
but problem is if without debug window, it never works.
anybody knows about these bug?
it has tabs permission already, and did not work tabs.remove too.
Can you be more specific? I ran your code with a blank popup.html and the following manifest.json and onUpdated worked fine:
{
"background": {
"scripts": [ "request.js" ]
},
"browser_action": {
"default_popup": "popup.html",
"default_title": "as2"
},
"description": "moving",
"manifest_version": 2,
"name": "as2",
"permissions": [ "tabs" ],
"version": "1.4"
}

Display Page Action Icon on specific url

I'm trying to get my page action icon to show on a specific url. I've tried implementing the examples here but these require the trunk/dev release.
The current code I have is taken from a SO answer. But this doesn't seem to work because the tab object never has a url property in my testing to be able to restrict on.
// background.js
function checkURL(tabId, info, tab) {
if (info.status === "complete") {
if (tab.url) {
// restrict here
chrome.pageAction.show(tabId);
}
}
}
chrome.tabs.onUpdated.addListener(checkURL);
// manifest
{
"manifest_version": 2,
"name": "My first extension",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": [
"script.js"
],
"run_at": "document_idle"
}
],
"background": {
"page": "background.html",
"persistent": false
},
"page_action": {
"default_icon": "icon.png"
}
}
What am I doing wrong?
This works for me:
//background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (~tab.url.indexOf('.pl')) {
chrome.pageAction.show(tabId);
}
});
//manifest.json
"permissions": [
"tabs"
]
and I'm not using persistent:false
I'm late to answer this, but this may help anyone else having the same issue. I just spent about 20 minutes looking for it for my own extension.
Look here https://developer.chrome.com/extensions/declarativeContent
Add this to your manifest.json
"background" : {
"scripts": ["background.js"]
}
"permissions" : [
"declarativeContent"
]
Then in background.js
var rule1 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
// If I wanted my extension to work only on SO I would put
// hostContains: 'stackoverflow.com'
// You can check out the link above for more options for the rules
pageUrl: { hostContains: 'some string' }
})
],
actions: [ new chrome.declarativeContent.ShowPageAction() ]
};
chrome.runtime.onInstalled.addListener(function (details) {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([rule1])
})
})

Cannot read property 'onConnet'

I'm attempting to follow the documentation here to pass a variable from my background script, to my content script.
http://code.google.com/chrome/extensions/messaging.html
Manifest:
{
"name": "name",
"description": "desc",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"options_page": "options.html",
"browser_action":
{
"default_icon": "icon.png",
"default_title": "Settings",
"default_popup": "settingspanel.html"
}
}
background.js file:
chrome.extension.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
port.postMessage({counter: msg.counter+1});
});
});
content.js
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
sendResponse({counter: request.counter+1});
});
I receive an error on the background script that says "Cannot read property 'onConnect' of undefined"
Probably your problem is Issue #131623: Reloading extension while developer tools are open breaks chrome object and js console.
Until the fix gets through you have to close the Developer Tools before reloading the extension.

Resources