Hopefully this is something simple. I'm testing a simple Chrome Extension script and it appears it'll execute part of the script, but won't complete it. For example, if I add an alert() to the beginning of a script, it will execute the alert. But if I place it after anything calling the chrome DOM object, it won't execute. Here's an example:
Will execute alert
alert("Test");
chrome.webRequest.onCompleted.addListener(function (request) { });
Will not execute alert
chrome.webRequest.onCompleted.addListener(function (request) { });
alert("Test");
Am I missing something?
Here is my manifest:
{
"background": {
"persistent": true,
"scripts": [
"scripts/libs/jquery.1.11.2.min.js",
"scripts/background.js"
]
},
"browser_action": {
"default_icon": "resources/icon.19.png"
},
"icons": {
"48": "resources/icon.48.png"
},
"manifest_version": 2,
"name": "Test",
"permissions": [
"<all_urls>",
"webNavigation",
"webRequest",
"webRequestBlocking"
],
"version": "1.0"
}
You are missing debugging it yourself.
Go to chrome://extensions/ and load the Dev Tools for your background page. You will see an uncaught exception that stops execution.
For webRequest events, you must include a filter argument to the addListener function.
Related
I've been trying to migrate one of my Chrome extensions to manifest v3, and I'm having trouble with the page_action. In manifest v3, the page_action and browser_action are merged into action, which is all good, but it's not clear to me how I can get the behavior I had previously with the new APIs.
A bit of background; the extension in question is only supposed to run on one host (let's say https://example.com). As such, I want to grey out the icon on pages with a different host. It has a popup with some settings but the main functionality is inserted via a content script (this works).
The old extension using manifest v2 used
{
"manifest_version": 2,
"name": "...",
"description": "...",
"version": "...",
"permissions": ["declarativeContent", "storage", "https://example.com/", "tabs"],
"page_action": {
"default_icon": { ... },
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": { ... },
"content_scripts": [{
"js": ["content.js"],
"matches": ["https://example.com/*", "https://www.example.com/*"]
}]
}
and in background.js I used
chrome.runtime.onInstalled.addListener(function(){
const pageUrl = {hostEquals: 'www.example.com'};
const {
onPageChanged,
PageStateMatcher,
ShowPageAction
} = chrome.declarativeContent;
onPageChanged.removeRules(undefined, function(){
onPageChanged.addRules([{
conditions: [new PageStateMatcher({pageUrl})],
actions: [new ShowPageAction()]
}]);
});
});
this works fine and the icon gets greyed out except on https://example.com. When migrating, the manifest looks like
{
"manifest_version": 3,
"name": ...,
"description": ...,
"version": ...,
"permissions": ["storage", "tabs", "declarativeContent", "activeTab"],
"background": {"service_worker": "service-worker.js"},
"action": {
"default_icon": { ... },
"default_popup": "popup/index.html"
},
"icons": { ... },
"content_scripts": [{
"matches": ["*://*.example.com/*"],
"js": ["content/detect-theme.js"]
}]
}
I cannot seem to get this to work properly. I've tried adding host_permissions, removing the declarativeContent-related code (as it doesn't seem to affect the icon whatsoever) but the extension stays available on all hosts. I know I can use the chrome.action.enable and chrome.action.disable methods to simulate this behavior but it seems overkill for such a simple use-case.
Actually, the action being available even on other pages is not breaking by any means, but I would like to make it more clear to my users that the extension only does things on https://example.com and nowhere else. Perhaps this is not even the right approach; if it isn't, I accept that as an answer as well.
TLDR; how do I only enable the (page-)action on a specific host with manifest v3?
Had the same issue myself, and I just solved it!
I fixed it by disabling the extension in the handler before adding the activation rule. I've removed the actual handler for brevity.
chrome.runtime.onInstalled.addListener(() => {
chrome.action.disable(); // The important line!
// actual handler...
});
I would guess that ShowPageAction doesn't disable the extension by default anymore.
I'm developing a chrome extension and I want to detect every time a user clicks the extension icon.
I used chrome.browserAction.onClicked.addListener(function(){console.log('icon clicked')}) but I get the message one time only, when I click second time, third time, ... I get nothing. I don't know where is the problem
Below a portions of code of the extension:
manifest.json
{
"manifest_version": 2,
"name": "My ext",
"version": "0.1",
"browser_action": {
"default_title": "My ext"
},
"permissions": [
"tabs", "<all_urls>"
],
"background":
{
"scripts": ["background.js"]
} }
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
console.log("icon clicked")
// do something
});
I started building chrome extensions. Initially I started with a simple extension which prints the hello in background console. How can I print that in the active window console.
This is my manifest.json file
{
"manifest_version": 2,
"name": "example",
"version": "0.1",
"description": "My Chrome Extension",
"icons": {
},
"background": {
"scripts": ["js/background.js"]
},
"browser_action": {
"default_title": "My test Environment"
},
"permissions": [
"background",
"storage",
"tabs",
"http://*/*",
"https://*/*"
]
}
This is the content of my background.js file
a simple
console.log("hello");
Take a look at Content Script, you could use manifest.json injection or Programming injection to ensure your code run in the context of current webpage.
The former requires Message Passing or Storage to ensure communications between content script with background page;
while as for the latter, Try the following code in background.js
chrome.tabs.executeScript({code: "console.log('hello');"});
I'm starting to learn to make my own Chrome Extensions, and starting small.
At the moment, I'm switching from using the alert() function to console.log() for a cleaner development environment.
For some reason, console.log() is not displaying in my chrome console logs. However, the alert() function is working just fine.
Can someone review my code below and perhaps tell me why console.log() isn't firing as expected?
manifest.json
{
"manifest_version": 2,
"name": "Sandbox",
"version": "0.2",
"description": "My Chrome Extension Playground",
"icons": {
"16": "imgs/16x16.png",
"24": "imgs/24x24.png",
"32": "imgs/32x32.png",
"48": "imgs/48x48.png"
},
"background": {
"scripts": ["js/background.js"]
},
"browser_action": {
"default_title": "My Fun Sandbox Environment",
"default_icon": "imgs/16x16.png"
},
"permissions": [
"background",
"storage",
"tabs",
"http://*/*",
"https://*/*"
]
}
js/background.js
function click(e) {
alert("this alert certainly shows");
console.log("But this does not");
}
// Fire a function, when icon is clicked
chrome.browserAction.onClicked.addListener(click);
As you can see, I kept it very simple. Just the manifest.json and a background.js file with an event listener, if the icon in the toolbar is clicked.
As I mentioned, the alert() is popping up nicely, while the console.log() appears to be ignored.
Try to open the "_generated_background_page.html" in extension page (chrome://extensions/)
I am trying to write a chrome plugin,which I defined with the following manifest:
{
"name": "test",
"version": "1.0",
"background": { "scripts": ["background.js"] },
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"name": "test",
"icons": ["icon.png"]
},
"manifest_version": 2
}
my background.js file looks like this:
chrome.app.runtime.onLaunched.addListener(function() {
console.log('details', chrome.app.getDetails());
});
When it loads, I see this error on the console:
Uncaught TypeError: Cannot read property 'onLaunched' of undefined
I can't figure out why I am not seeing a properly initialized chrome.app.runtime.
How do I debug this?
Gene
UPDATE:
When I run the following code:
console.log("before connection");
chrome.extension.onConnect.addListener(function(port) {
console.log("connected");
});
I see the first log output (before connection) but not the second; does this mean that it fails to connect to the browser?
chrome.app is undefined because you aren't defining your extension as an app.
Chrome extension can be only one of these in the manifest file:
browser_action, page_action, theme, or app.
In your manifest you're defining an browser action.
So take a deep breath and read the documentation for the manifest file.