I am migrating my chrome extension from manifest version 2 to 3.
There is a problem in injecting the file with the click of the extension icon.
Manifest.json
{
"manifest_version": 3,
"name": "Name of Extension",
"description": "description",
"version": "1.0.0",
"background": {
"service_worker": "background.js"
},
"permissions": [
"activeTab",
"scripting"
]
}
Background.js - Manifest version 3 ( This code is not working )
chrome.action.onClicked.addListener(function() {
chrome.scripting.executeScript({
files: ['"function.js"']
});
});
background.js - Manifest version 2
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "function.js"});
});
Use tab parameter as described in the documentation for onClicked
Specify tab's id as described in the documentation for executeScript
Remove the nested quotes in the file name
chrome.action.onClicked.addListener(tab => {
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['function.js'],
});
});
Related
I have written a simple extension just to learn how it works.
Manifest V3:
{ "name": "Sample",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_name": "Sample",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["tabs", "storage", "activeTab", "clipboardRead", "scripting"],
"host_permissions": ["http://*/", "file://*/*", "https://*/", "*://*/*"]
}
popup.html:
.....
.....
<button id='getInfo' >GET</button>
.....
.....
popup.js:
....
document.getElementById("getInfo").addEventListener("click", function() {
chrome.tabs.query(
{active: true, currentWindow: true},
(tabs) => {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
file: ['func.js'],
});
});
}
func.js:
alert("extension sample")
When i press the button 'GET' i receive an error in extension manager page.
The error says: "Error handling response: TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Unexpected property: 'file'."
I have tried with function instead of the file and it works.
How i can fix this error? Thank you.
chrome.scripting.executeScript does not have file property.
You should use files property.
Search for "executeScript" in the official Google documentation below to see the sample.
https://developer.chrome.com/docs/extensions/reference/scripting/
Following Chrome Extension Manifest V3 rule I want to create an extension, that listens to particular network request and, for startes, just log them to the console of the currently opened tab (later I want to add custom script and styles to the page in the current tab).
For this I try to utilize chrome.scripting.executeScript.
When I implement the sample from https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/examples/page-redder/manifest.json it works like expected for the chrome.action.onClicked listener.
As soon as I try to execute a script within the chrome.webRequest.onBeforeRequest listener, this error pops up:
Error in event handler: TypeError: Error in invocation of
scripting.executeScript(scripting.ScriptInjection injection, optional
function callback): Error at parameter 'injection': Error at property
'target': Missing required property 'tabId'.
at chrome.webRequest.onBeforeRequest.addListener.urls ()
Missing required property tabId? I assume it has to do with the lifecycle, but I cannot figure out what to do. This is my manifest:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js",
"matches": [ "<all_urls>"]
},
"host_permissions": [
"<all_urls>"
],
"permissions": [
"activeTab",
"tabs",
"webRequest",
"webNavigation",
"management",
"scripting"
]
}
And this is my script, I just slightly modified the "redden"-example:
function reddenPage(url) {
console.log(url);
}
chrome.webRequest.onBeforeRequest.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: reddenPage,
args: [tab.url],
});
},
{urls: ["*://*.google.com/*"]},
[]);
I don't know exactly why, but the script from Github seems not work. This is how it works:
It's not only a couple of changed brackets, look at tab instead of (tab), but also tab.tabId instead of tab.id:
chrome.webRequest.onBeforeRequest.addListener(tab => {
chrome.scripting.executeScript(
{
target: { tabId: tab.tabId },
function: reddenPage,
args: [details.url],
},
() => { console.log('ZZZ') });
}, {
urls: ['<all_urls>']
});
I am trying to migrate my browser extension to manifest version 3 but I am not able to access some properties from chrome.runtime in my service_worker. Code explains more than words I guess.
My background.js file:
function call() {
console.log({ runtime: chrome.runtime })
chrome.runtime.getPackageDirectoryEntry(() => null)
}
// putting it to timeout otherwise I couldn't access the logs page
setTimeout(() => {
call()
}, 0)
My manifest:
{
"manifest_version": 3,
"name": "Test",
"version": "0.0.0",
"background": {
"service_worker": "background.js"
}
}
When I open service worker page I can see
Uncaught TypeError: chrome.runtime.getPackageDirectoryEntry is not a function
The same code works with v2:
{
"manifest_version": 2,
"name": "Test",
"version": "0.0.0",
"background": {
"scripts": ["backgroud.js"]
}
}
The method I am trying to use is documented here but it is clearly missing in the runtime object (with plenty of others...)
I found this answer on how to grab the page source of current tab:
Getting the source HTML of the current page from chrome extension
However, this answer requires user to press the extension popup.
I would like to know how I can access the page source upon loading of page (without having to invoke the popup).
In my background.js I've tired this:
chrome.tabs.onUpdated.addListener(function (tabId , info) {
console.log(info)
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
if (chrome.runtime.lastError) {
message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
}
});
});
but this results in the following error:
There was an error injecting script : Cannot access contents of the
page. Extension manifest must request permission to access the
respective host.
My manifest.js:
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["declarativeContent",
"https://www.example.com/*",
"storage",
"activeTab"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"options_page": "options.html",
"manifest_version": 2,
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
}
I don't think the issue is really with permissions because I am able to get the page source from the popup.html (which is page_action script). But I am not able to get it via "background" or "content_scripts". Why is that and what is the proper way to accomplish this?
It is about the permissions.
Your example a bit insufficient, but as I can see you are using "activeTab" permission.
According to the activeTab docs, the extension will get access (e.g. sources) to current tab after any of these actions will be performed:
Executing a browser action
Executing a page action
Executing a context menu item
Executing a keyboard shortcut from the commands API
Accepting a suggestion from the omnibox API
That's why you can get sources after opening the popup.
In order to get access to tabs without those actions, you need to ask for the following permissions:
tabs
<all_urls>
Be noted, it allows you to run content-script on every tab, not only the active one.
Here is the simplest example:
manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["tabs", "<all_urls>"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
background.js
chrome.tabs.onUpdated.addListener(function (tabId, info) {
if(info.status === 'complete') {
chrome.tabs.executeScript({
code: "document.documentElement.innerHTML" // or 'file: "getPagesSource.js"'
}, function(result) {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log(result)
}
});
}
});
I have created an extension that uses the executescript api to inject a piece of code (shown below) that basically on window.onbeforeunload confirms they want to close the page. I have the script working, and by using the file://*/* permission, got it to inject on file URLs. However, when testing it on a flash game I downloaded, the script didn't inject. The URL was externalfile:drive-randomtext/root/SWFNAME.swf. I tried adding externalfile://*/* in the permissions but got the following error message: There were warnings when trying to install this extension: Permission 'externalfile://*/*' is unknown or URL pattern is malformed. Is there an external file permission, or another way to do this?
Manifest.json:
{
"name": "name",
"short_name": "name",
"version": "3.6",
"manifest_version": 2,
"description": "Desc",
"permissions": [
"storage",
"http://*/",
"https://*/",
"tabs",
"activeTab",
"webNavigation",
"*://*/*",
"file://*/*"
],
"page_action": {
"default_icon": "logo.png"
},
"background": {
"scripts": ["disabled.js"]
}
}
Script that gets executed:
(hotkey-binding code too long, can be found here)
Mousetrap.bind('ctrl+m', function(e) {
window.onbeforeunload = confirmExit;function confirmExit(){alert('confirm exit is being called');return'Close page?';}
alert('Enabled');
return false;
});
Mousetrap.bind('ctrl+q', function(e) {
location.reload();
return false;
});