I want that if any of my webpage loads I want to simply display a simple alert on the page.
manifest.json
{
"manifest_version": 2,
"name": "Chrome Ext Demo",
"description": "chrome extension tuts",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/* "],
"js": ["jquery.js","eventPage.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/"
]
}
I have jquery stored locally in my chrome extension folder.
eventPage.js
$("document").ready(function(){
alert("hiii");
console.log("hii");
});
I am new to building Chrome Extension. Any help would be appreciated.
Please remove the useless space in your "matches": ["http://*/* "]field, it doesn't match a valid url.
If possible, remove useless permissions if they are not used.
{
"manifest_version": 2,
"name": "Chrome Ext Demo",
"description": "chrome extension tuts",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.js","eventPage.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
Related
I am using background.js script to hide my page_action icon with the following code:
chrome.pageAction.hide(sender.tab.id, function(some) {
console.log(sender.tab.id);
});
However, the icon is always 'on' and never gets hidden. I do not have any other functionality which enables the icon, and according to page_action documentation, the icon should be hidden by default.
If I remove my content script from manifest.json, indeed, the icon is disabled by default.
Here is manifest.json:
{
"manifest_version": 2,
"name": "Chrome Extension",
"description": "Chrome Extension",
"minimum_chrome_version": "10.0",
"version": "1.0",
"page_action": {
"default_icon": "logo.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"js/vendor.js",
"js/content_script.js"
],
"css": [
"js/content_script.css"
]
}
],
"background": {
"scripts": [
"js/vendor.js",
"js/background.js"
]
},
"permissions": [
"declarativeContent",
"tabs",
"webNavigation",
"storage",
"activeTab",
"<all_urls>"
]
}
Any thoughts?
Even after searching a lot of topics in stack overflow, nothing helped me to fix this error...
I'm trying to create an extension, and for now there are simple codes in it, but unfortunately, the console is not logging 'Hello, world!' from the content_scripts file.
manifest.json
{
"manifest_version": 2,
"name": "Example",
"shortname": "exmpl",
"description": "__MSG_appDesc__",
"version": "0.0.1",
"default_locale": "en",
"author": "Mateus Akino",
"icons": {
"16": "i16x.png",
"48": "i48x.png",
"128": "i128x.png"
},
"homepage_url": "http://example.com/",
"browser_action": {
"default_icon": "i32x.png",
"default_popup": "popup.html"
},
"update_url": "http://example.com/update.xml",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"content_scripts": [{
"matches": ["*://*.youtube.com/*"],
"js": ["execute.js"],
"run_at": "document_end"
}],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab", "tabs", "i18n", "management", "webNavigation", "<all_urls>"
]
}
execute.js
console.log("Hello, world!");
background.js
chrome.webNavigation.onHistoryStateUpdated.addListener(function (details) {
chrome.tabs.executeScript(null, {
file: "execute.js"
});
});
I fixed the problem, so I'm posting it here if someone else has the same issue.
Looks like the code was fine, the problem was the way I was loading the extension...
As I'm using 'Load unpacked extension', my manifest.json wasn't updating just by disabling and enabling it (neither by using Refresh extensions now).
So I removed the extension, loaded it again and it's working normally now.
I built a Chrome Extension script that is supposed to run on Reddit.
My script:
console.log("hello world");
My manifest.json
{
"manifest_version": 2,
"name": "Name",
"description": "Desc",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"*://reddit.com/*"
],
"js": [
"contentscript.js"
],
"run_at": "document_end"
}
],
"permissions": [
"tabs", "*://reddit.com/*", "activeTab"
]
}
The script doesn't show up in the "Content Script" section in the chrome dev tools. Does anyone have an idea why my extension is not running?
"*://reddit.com/*" doesn't match a valid url, you should use "*://*.reddit.com/*"
i have made one chrome extension and below is my manifiest.json file
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Example Dictionary",
"browser_action": {
"default_icon": "16x16.png",
"icons": ["128x128.png"],
"default_title": "Dictionary",
"default_popup": "index.html"
},
"icons": {
"16" : "16x16.png",
"48" : "48x48.png",
"128": "128x128.png" },
"content_scripts": [
{
"matches": ["<all_urls>"],
"css" : ["jqm-demos.css","jquery.mobile.min.css"],
"js": ["index.js","jquery.js","jquery.mobile.min.js"]
}
]
}
now when i load popup.html page is looking like
but when i load extension it will be look like
Your manifest file should look like this:
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Example",
"version": "1.0",
"manifest_version": 2,
"description": "Example Dictionary",
"browser_action": {
"default_icon": "16x16.png",
"icons": ["128x128.png"],
"default_title": "Dictionary",
"default_popup": "popup.html"
},
"icons": {
"16" : "16x16.png",
"48" : "48x48.png",
"128": "128x128.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css" : ["jqm-demos.css","jquery.mobile.min.css"],
"js": ["index.js","jquery.js","jquery.mobile.min.js"]
}
]
}
According to your snapshot, you should assign "popup.html" to default_popup property. This field means which page do you want to be shown in popup dialog when user clicked the browser action icon.
Hope this is helpful for you.
How can I write a simple Chrome Extension content script that will execute JavaScript (for example alert("hello");) on every page load?
So when I navigate to a page or reload a page, the JavaScript should run.
This is my manifest.json file so far:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text from websql database after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"]
}
],
"background": {
"page": "background.html"
},
"manifest_version": 2
}
If all you need is to alert hello on every page load or reload, below is a simple demo:
Manifest.json:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"],
"run_at": "document_end" // Pay attention to this line
}
],
"manifest_version": 2
}
and content.js:
// alert("hello");
document.body.style.background = 'yellow';
Yes, that's enough.
And of course, don't forget to add an icon named icon.png at the same directory with these two files, then test it in Google Chrome.