chrome Extension Development, JS issue. - javascript

Okay so I'm a JS noob, and I can admit that. I've been reading up and learning how to make extensions for chrome. So I want to have a content script and browser action, but I can't get it to run for the life of me. It's probably something dumb I'm doing something wrong, but any help is appreciated.
{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"name": "*********",
"version": "0.3",
"description": "*****************************",
"icons": { "16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png" },
"browser_action": {
"default_icon": {
"19": "icons/19x19.png",
"38": "icons/38x38.png"
},
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
"content_scripts":
[
{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_end"
}
]
}

I can't write a comment,
Perhaps a comma is missing here
"default_popup": "popup.html"
}, <-- HERE!!
"content_scripts":

Related

I want to redirect to a custom html page when new tab is created in chrome

I am developing a chrome extension. I want to redirect to a custom html page when new tab is created.
This is process.js file.
chrome.tabs.onCreated.addListener(function() {
alert("hello");
window.open('https://ucsc.cmb.ac.lk/', '_self', false);
});
This is manifest.json file.
{
"manifest_version": 2,
"name": "xxx",
"version": "1.0",
"description": "xxx",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["process.js"],
"presistent": true
},
"permissions": [
"storage",
"notifications",
"contextMenus",
"tabs",
"activeTab",
"http://*/",
"https://*/"
]
}
alert is working. but it is not loading the page.
You are probably looking for Override Pages.
Add this code to your manifest file:
"chrome_url_overrides" : {
"pageToOverride": "myPage.html"
},
You can try this:
window.open('https://ucsc.cmb.ac.lk/', '_blank', false);

Google Chrome content_script not loading JS on matching URL

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.

Chrome Extension not working on page loads

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"
]
}

How to get data from chrome extension local storage?

I'm developing a chrome extension, popup.html saves some data into extension's local storage (key:viewMode value:WYSIWYG)
When I'm trying to retrieve the data using Chrome Storage API from script.js, it says that viewMode is undefined.
Here is manifest.json
{
"manifest_version": 2,
"name": "LoremIpsum",
"description": "Dolor sit amet",
"version": "1.2.8",
"permissions": [
"http://*.exemple.org/*",
"storage"
],
"browser_action": {
"default_icon": {
"19": "icons/19.png"
},
"default_title": "LoremIpsum",
"default_popup": "popup.html"
"icons": {
"16": "icons/16.png",
"19": "icons/19.png",
"48": "icons/48.png",
"128": "icons/128.png"
},
"web_accessible_resources": [
"img/*.png",
"smilies/*.gif",
"style.css"
],
"content_scripts": [
{
"matches": ["http://*.exemple.org/*showtopic*", "http://*.exemple.org/*act=ST*"],
"css": ["style.css"],
"js": ["jquery-1.10.2.min.js", "popup.js", "script.js"]
}
]
}
I just realized that I made a dumb error while setting chrome.storage.local. I've passed arguments as an array instead of passing them as an object.

extension's popup.html does not load properly on Chrome

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.

Categories

Resources