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/
Related
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'],
});
});
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 have connected web page with the chrome extension. Collecting response in background.js. Following is my code:
manifest.json
{
"manifest_version": 2,
"name": "CIC Wallet",
"description": "The CIC Wallet in your browser",
"version": "1.0",
"browser_action": {
"default_icon": "Image/CI_logo-01.png",
"default_popup": "popup.html"
},
"icons": { "16": "Image/CI_logo-01.png",
"48": "Image/CI_logo-01.png",
"128": "Image/CI_logo-01.png"
},
"background":{
"scripts": ["background.js"]
},
"externally_connectable": {
"matches": ["http://127.0.0.1:5500/main.html"]
},
"web_accessible_resources": [
"popup.js", "background.js"
],
"permissions": [
"activeTab"
]
}
background.js
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
console.log('from webpage');
window.open("popup.html", "CIC Notification", "width=357,height=600,status=no,scrollbars=yes,resizable=no");
document.getElementById("sendtrform").style.display="block";
});
main.js
window.addEventListener('load', function load(event){
var createButton = document.getElementById('btn_buy_trust');
createButton.addEventListener('click', function() {
var laserExtensionId = "myextID";
chrome.runtime.sendMessage(laserExtensionId, 'Hi from Webpage',
function(response) {
});
});
});
main.js is the js file from my webpage, on button click, I am sending the message. In background.js, I am collecting the response and opens my extension HTML file in the separate window. Here in background.js, I am not able to access HTML elements from the popup.html file.
I am getting an error for this line:
document.getElementById("sendtrform").style.display="block";
Can somebody help me, how can I access HTML elements from background.js?
I've been trying to develop a chrome extension that creates notifications after certain periods of time. I've been using both chrome.alarms and chrome.notifications to accomplish this, but I cannot get notifications to appear, even when creating them from the console. I also don't get any errors from runtime.lastError in the callback. I do know for certain that the alarm listener and callback are being executed.
manifest.json
{
"manifest_version": 2,
"name": "notifications",
"version": "0.0",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["notifications.js"],
"persistent": false
},
"permissions": [
"alarms",
"storage",
"notifications"
],
"web_accessible_resources": [
"mascot48.png"
]
}
notifications.js
function resetTimer(id, minutes) {
chrome.alarms.create(id,{delayInMinutes: minutes});
}
chrome.alarms.onAlarm.addListener((alarm) => {
console.log('alarm!');
chrome.notifications.create('reminder', {
type: 'basic',
iconUrl: 'mascot48.png',
title: 'Dont forget!',
message: 'You have things to do'
}, function(notificationId) {
console.log(chrome.runtime.lastError);
});
});
Is there anything clear that I'm getting wrong?
EDIT: For clarity, notifications.js is my events page, the popup page is the one that runs the code to start the alarms.
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;
});