I am working to add the Object watch polyfill by Eli Grey through a Chrome Extension. The script should be executed before any page gets parsed. When the javascript files or inline scripts get executed, I am looking to watch cookie property of document object.
Here is what I tried:
manifest.json
{
"manifest_version": 2,
"name": "Cookie Tracker",
"description": "Tracks cookie",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Click here"
},
"background": {
"scripts": ["scripts/object-watch.js", "myScript.js"]
},
"content_scripts" : [{
"matches" : ["http://*/*", "https://*/*"],
"run_at": "document_start",
"js": ["scripts/object-watch.js", "myScript.js"]
}],
"web_accessible_resources": ["scripts/object-watch.js"]
}
myScript.js
document.watch('cookie', function(id, oldValue, newValue) {
console.log("document.cookie oldValue-",oldValue, " newValue-", newValue);
});
console.log("myScript executed");
scripts/object-watch.js
Content from -- https://gist.githubusercontent.com/eligrey/384583/raw/96dd5cd2fd6b752aa3ec0630a003e7a920313d1a/object-watch.js
I tried both content-script and background-pages. When I load the extension from directory and load the page. I only see in my browser console:
>Object-watch executed
>myScript triggered
I do not see the changes to document object's cookie property when I load any page though the page is setting cookie's. I am not sure what I am missing? Can someone provide some hints.
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 am creating a chrome extension. Problem I am facing is I am able to see the html content but I am not seeing my js files included in content_scripts. I am checking this by inspecting on my extension & checking sources tab.
Mainfest -
{
"manifest_version": 2,
"name": "My Plugin",
"description": "some description",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["myPopup.js"]
}
],
"permissions": [
"activeTab",
"declarativeContent",
"storage"
]
}
myPopup.js -
console.log("hello world")
What could I be doing wrong?
Source tab will display the scripts that are actually injected into page DOM.
If you are trying to debug the content script, then add a debugger to your content script.
Open the developer tools and reload the page, you should be able to see content script in the source tab.
enter image description here
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 have a little problem whit my chrome extension.
The extension works if I'm on a URL that not uses fragment.
Now sure on how to configure it.
Im trying with definition < all_urls > but as I wrote. it does not work on pages with fragment.
manifest.json
{
"update_url": "https://clients2.google.com/service/update2/crx",
"name": "Analytic Live Alarm",
"version": "0.3",
"description": "Felipe the solution provider",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon_128.png"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"run_at": "document_end" ,
"js": ["jquery.min.js", "script.js"]
}
],
"manifest_version":2
}
This is the url Im using.
https://www.google.com/analytics/web/#dashboard/6I8yfVs_TqSQ_b1tOJYR0Q/a8398197w15972131p74378741/
Any ideas?
Thanks
Taking into account your previous question..
It's not "not working", it's working once; then, as you navigate, the page is not really reloaded, and your script does not run again.
Instead of coloring all elements at document_end, you need to detect new elements that match your selector and re-apply your styles.
This question should help you get started, or better yet mutation-summary library.
made my first chorme ext. and it works fine on old comp.
now with new one try to load unpacked ext. and it don't works at all. i see my ext popup ad bg.html but content script didn't loads at all, neiter images that shold be on target page.
other unpacked ext works fine. but mine refuse works( help me please!
manifest.json:
{
"background_page": "bg.html",
"name": "lardi trans",
"version": "1.0",
"icons": {
"48": "icon_48.png"
},
"browser_action": {
"default_icon": "icon_48.png",
"default_title": "Lardi Trans",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"notifications",
"http://lardi-trans.com/gruz/*",
"http://lardi-trans.com/trans/*",
"unlimitedStorage"
],
"content_scripts": [{
"matches": [
"http://lardi-trans.com/gruz/*",
"http://lardi-trans.com/trans/*"
],
"css": ["extent_styles.css"],
"js": ["jq.js", "script.js"],
"run_at": "document_end"
}]
}
screenshots of page where ext should be i mark place where must appears my form
console shot
and other ext scripts loads like this ! screenshot2 (5 times same script? WTF??) but anyway i can't see my ext script.js (why it din't loads?)
You do not have to give the link of css to manifest.json file. Just, call it in bg.html
My manifest.json file
{
"name": "Example",
"version": "2.0",
"description": "Example.com Description",
"icons": { "16":"Images/Example/16x16.png", "32":"Images/Example/32x32.png", "48": "Images/Example/48x48.png", "64": "Images/Example/64x64.png", "128": "Images/Example/128x128.png" },
"app":
{
"default_icon": "../Images/Example/icon.png",
"launch":
{
"local_path": "Pages/Index.html"
}
},
"permissions": [ "http://www.Example.com/",
"http://*.Example.com/",
"https://www.Example.com/",
"https://*.Example.com/",
"unlimitedStorage",
"tabs",
"notifications"
],
"options_page": "Pages/Options.html",
"background_page": "Pages/Background.html"
}
If that answer helped you, please mark it as an answer...
If you are still taking errors, please ask them to bottom of that answer.
Best Regards.
EDIT:
View errors - Steps;
Click your extension button to open it.
Open the debug window in Google Chrome with F12 key.
Click "Console" tab page.
Take a screenshot of it, and post the picture in your question.
With that way everybody can help you =)
EDIT 2:
ok your question seems looking littlebit different now.
Here is algorithm;
Download the site sourcecode of target webpage with jquery,
Insert your css line in head tag with json,
Store new source code in localStorage( html5 )
When it's done, refresh the page with js, and read new source code from localStorage
And show it in html.
if anyone interests, problem solved, by some reason in manifest add unprop whitespases "content_scripts": [{
"matches": ["http://lardi-trans.com/gruz/*","http://lardi-trans.com/trans/*"],
this works!))