I'm trying to make an extension for Google Chrome.
I created the files manifest.json and popup.html. My problem is that I can't test my extension, in fact, I only have the icon. When I click on it, well, nothing happens, no message, no popup, no error, nothing.
Here is my code:
{
"manifest_version":2,
"name":" empire",
"description":"test",
"version":"1.0",
"permissions": [
"http://*.google.com/"
],
"browser_action": {
"default_icon":"img/icon/logo.png",
"popup":"popup.html"
}
}
My html has just a "Hello world" string.
Does anyone have a solution for me? Thank you!
Related
First of all sorry that this is the third time I am posting this question. I got some rude and unhelpful replies the previous times, possible as a result of not being clear enough. I hope this new format will make my actual issue more clear, and hopefully someone knows how to resolve this issue!
So what is the issue? <input type="color"> inside the the addon popup you get when clicking the extension icon in the toolbar closes said popup (while still providing the color picker). This issue only happens on Firefox, on Chrome using the same extension the color picker opens and the extension popup remains open as it should.
It might also be relevant that I am using Windows. I have not tested this on Linux and MacOS, so it might work as intended on those. But even if those don't have the same issue I would still like the extension to function with this input on all OS's.
This is what said popup looks like (for the example code below):
Here is the example code you need to reproduce the issue:
HTML (popup.html):
<input type="color">
(Adding doctype, html or body tags do not change the behaviour in this case)
Manifest.json:
{
"manifest_version": 2,
"name": "name",
"description": "example",
"version": "0.0",
"browser_action": {
"default_icon": "icons/icon48.png",
"default_popup": "popup.html",
"default_title": "Title"
},
"icons": {
"128": "icons/icon128.png",
"48": "icons/icon48.png",
"16": "icons/icon16.png"
}
}
You will likely also need to add the folder of icons defined in the manifest to the folder the manifest.json and popup.html are located in. Also if any more info is needed don't hesitate to ask!
For easier testing here is a download to the example extension code given above that reproduces this issue: https://drive.google.com/file/d/1ScHxir4jW4cdNSVZmtaNiKiGRTGzGyoH/view?usp=sharing
I'm trying to write a Chrome extension where, when clicked, it will drop down Google. For now, it only loads a local .html file. Here is the code I currently have:
{
"manifest_version": 2,
"name": "theName",
"description": "TheDesc",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "http://www.google.com",
"default_title": "Tooltip"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
I have 4 files in my folder: icon.png, manifest.json, popup.html, & popup.js. I am using the "Getting Started" tutorial from https://developer.chrome.com/extensions/getstarted as a template, as I am extremely new to all of this (vb6 programmer for years).
Edit:
I finally got it to open a webpage in the little popup. Now, I need to grab the Title of the current tab's URL, remove the spaces from it, trim it down to 30 characters max, assign it to a string, then navigate to www.website.com/STRING. What I'm thinking is the extension needs to create a new popup.html each time, but that could be taxing on the server. Perhaps this can be done straight from the extension? I don't have a clue. Just guessing at this point.
i am developing extension for google chrome. i am trying to load css file.if the css file is in root directory of extension then it loaded fine. but if i put css in /css folder then try to load css then it gives error could not load javascript for contentscript
{
"name": "test",
"version": "1.0",
"manifest_version": 2,
"description": "This is test",
"background":{"scripts":["background.js"]},
"permissions":
[
"http://*/*",
"https://*/*",
"file://*"
],
"content_scripts":
[
{
"matches":["*://mail.google.com/*"],
"css":["mystyle.css", "default.css","style.css"],
"js":["jquery.js","myscript.js","DOMAlert.js","css/core.js"]
}
]
}
i am new at developing extension so please help what's wrong.
I seem to be having the same issue. I managed to achieve this when I added a script that is external to my plugin. Check all of your js scripts to have exact spelling and case. It only complains about javascript if there is a permissions issue or the file does not exist.
I'm trying to integrate my bookmarklet into a Chrome Extension, but for some reason it doesn't work
I tried inserting:
chrome.tabs.executeScript(null, {file: "demo.js"});
I tried both into popup.html ; background.html
also i have in the manifest file:
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"notifications",
"contextMenus"
]
my demo.js is supposed to open a popup in which you enter a search phrase and then the wikipedia page opens. ( example taken from here: http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/ )
I tested the normal bookmarklet code and it works great but now when I try to integrate it with my Chrome extension I can't seem to make it working. When i press the extension icon it just opens a tiny blank extension window.
I tried many other combinations, not just what I said here.
Can you help?
There's a simple example of chrome.tabs.executeScript working at http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/ if you want to take a look at that.
Compare your manifest.json to the manifest.json there to look for differences in how you set up your browserAction and background page (you shouldn't have a popup page, as far as I can tell from your blog post). Specifically, things you probably want:
"background_page": "background.html",
"browser_action": {
"name": "Search Wikipedia",
"icons": ["icon.png"]
},
Here's how they set up their browserAction to call executeScript() when the extension icon is clicked, which sounds like how you want to do it:
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(
null, {code:"document.body.style.background='red !important'"});
});
In your case, it'd look more like this (in background.js -- see how their background.html has <script src="background.js"></script>; make sure your manifest.json includes background.html like they do):
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "demo.js"});
});
I'm trying to write a simple Chrome extension. I learnt how to write the "hello world" extension that Google put out, but how do I write an extension that will actually do something? Nothing online seems to explain it well. I know it involves HTML and CSS(? ), but what do I do? Say I want to write an extension that will enlarge everything--do I write an HTML file that does this and stick it in my extension folder? And what do I write in the manifest.json file so that it actually uses the HTML file?
Also, I'm a total beginner (I don't know HTML, all I know is a bit of Java) if you couldn't tell from the basic-ness of my questions.
In order to interact with the DOM of the site the user is viewing once the extension is installed you need to use content scripts. Look at the added lines in the manifest here:
http://code.google.com/chrome/extensions/content_scripts.html
Those lines let you indicate what js and css you want to use for the site and also specify what specific domains with 'matches':
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
Files needed:
icon.png ( http://www.mediafire.com/imageview.php?quickkey=37phkkdmd1dv1zf&thumb=4 )
manifest.json
popup.html
Put all in a folder together.
.
in the manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
put in popup.html:
hello world
Save both files.
go to extentions ( chrome://extensions/ )
And click developer mode. http://snpr.cm/HBuhYF.jpg
Click "load unpacked extention". and locate the folder.
It should load fine.
Click on the new extention and see the glory :)
edit, just read your post - you learned a hello world /facepalm