I am trying to create a simple Google Chrome extension. I don't want it to have an icon next to the omnibar. Is this possible? What do I need to put in my manifest.json?
Yes, this is possible. To do it, just don't declare browser_action in your manifest. Remember, though, to get it to work, you'll need to do something to run the script. contextMenus are a great way to do that.
Here's a manifest that has no browser action line, so it will not display an icon:
manifest.json
{
"manifest_version": 2,
"description": "Example",
"name":"Example",
"icons": {
"16": "img16.png" }, // Needed for the context menu
"background": {
"scripts":["background.js"] },
"permissions":[ "tabs", "contextMenus" ], // contextMenus permission allows you to create the action
"version": "1.0"
}
Related
So I'm in the midst of creating my first Chrome Extension (Trying)
I feel like I'm close... But I genuinely don't know what to google to get the answers I need. So I'm sorry if this is a silly question.
Essentially what I'm trying to do is on click of extension - Append HTML & CSS to body and run a jQuery function. But from the looks of it, I need to call in jQuery in the manifest? Which I think I've done and it's still not working.
My Code:
manifest.json
{
"name": "Title",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_title": "Hover Title",
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery-1.7.2.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
(function ($) {
$('body').append("Hello");
alert("Hello");
console.log("Hello");
}(jQuery));
});
Any insight into where I'm going wrong would be massively helpful!
Thank you!!
Chrome extension architecture is simple but it doesn't mean one can write code without studying it.
There are two methods of injecting content scripts:
Unconditionally on all specified urls, in which case "content_script" key is used in the manifest and the content scripts communicate with the background page via runtime.sendMessage.
Only when some event occurs like e.g. the user clicks our toolbar icon, in which case we only need the permission to access the active tab.
So in the given case we'll attach the icon click handler and inject the code afterwards:
manifest.json:
{
"name": "Title",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_title": "Icon Title",
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": ["activeTab"],
"manifest_version": 2
}
background.js (this is an event page because we didn't use "persistent": true in the manifest, so be advised that the [global] variables will be lost after a few seconds of inactivity; instead you should use chrome.storage API or HTML5 localStorage/sessionStorage/and so on):
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({file: "jquery-1.7.2.min.js"}, function(result) {
chrome.tabs.executeScript({file: "content.js"}, function(result) {
});
});
});
content.js (the code runs in a sandbox so there's no need to hide global variables using IIFE)
$('body').append("Hello");
alert("Hello");
console.log("Hello");
Recently, I've started learning how to make Google Chrome extensions. My problem is that I don't know how to make a button in the toolbar so that when I click on it, it show me options for my extension like this example:
I can get the icon of my extension to appear in the toolbar, but nothing happens when I click on it. Here is my manifest.json:
{
"name": "Extension Name",
"version": "0.1.1.2",
"description": "Extension's description",
"manifest_version": 2,
"options_page": "options.html",
"background": {
"page": "index.html"
},
"browser_action": {
"name": "Manipulate DOM",
"icons": {
"128":"icon.png"
},
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "js-resource.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
That's a popup, not an options page. Currently you have two ways to do an options page as such:
Old way: In a separated tab.
New way (Chrome 40 onwards): In a popup in the extensions page.
However, those page are not too special and the only thing you should do to persist the user's preferences is to store them in chrome.storage.sync, as you can read in both links, respectively:
Use the storage.sync API to persist these preferences. These values will then become accessible in any script within your extension, on all your user's devices.
Always use the storage.sync API to persist your options. This will make them accessible from script within your extension, on all of your user's devices.
So as long as you store the preferences in there, you can make an options page in the browser action (or page action) popup. You just need to add the following to your manifest.json and to create the popup.html page:
"browser_action": {
"default_title": "Manipulate DOM",
"default_icon": "icon.png",
"default_popup": "popup.html",
...
}
I was working on a chromecast app, and I wanted to incorporate it into a chrome extension. I'm also using knockout.js in order to help with some of the UI. I have two pages, one is unsandboxed (http://jsfiddle.net/AuJaX/3/), and the other is sandboxed (http://jsfiddle.net/V2dJc/1/). None of the console.log's ever get called. My manifest is below:
{
"manifest_version": 2,
"name": "__MSG_app_title__",
"description": "__MSG_app_description__",
"version": "0.1",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/content/content.js"]
}
],
"background": {
"scripts": ["js/back/background.js"],
"persistent": false
},
"permissions": [
"tabs",
"contextMenus"
],
"page_action": {
"default_title": "__MSG_app_title__",
"default_icon": {
"19": "images/icon-19.png"
}
},
"sandbox": {
"pages": ["sandboxed.html"]
},
"icons": { "48": "images/icon.png" },
"default_locale": "en"
}
Is there anything that I'm doing wrong, or is this something that's not supported (yet??)?
Did you whitelist the domain you are trying to use the extension on? Currently to have the Cast API injected into the page you need two things:
<html data-cast-api-enabled="true">
and you need to follow the steps at the bottom of this page (whitelisting in the extension, not the same as the Google Cast device whitelisting):
https://developers.google.com/cast/whitelisting#whitelist-chrome
That said, I doubt this is going to work. The instructions are for getting the Cast API injected into a regular web page. However, if I'm not mistaken you want the API injected into your Chrome extension page. I don't know if it will be made available there, since I don't think two different extensions are allowed to interact.
My CRX had the proper html page options.html in it, the manifest declares it properly (it shows up as a link on the chrome://extensions page) but when I click that link, Chrome gives the error:
This webpage is not available
The webpage at chrome-extension://invalid/ might be temporarily down or it may have moved permanently to a new web address.
It says "invalid" but the app runs perfectly well (all the content scripts run, the background created a database and saved to it). Why would it show as invalid? Why doesn't it have the extensions' id?
Here's the manifest:
{
"manifest_version": 2,
"name": "MyAPP",
"description": "My App",
"version": "0.0.0.32",
"minimum_chrome_version": "27",
"offline_enabled": true,
"options_page": "options.html",
"icons":
{
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"app":
{
"background":
{
"scripts":
[
"scripts/background.js"
]
}
},
"permissions":
[
"unlimitedStorage",
"fullscreen",
{
"fileSystem":
[
"write"
]
},
"background",
"<all_urls>",
"tabs"
]
}
Does it need to be declared in "web_accessible_resources"? Any idea what's wrong?
Update
Adding to "web_accessible_resources" does not fix the issue. I added everything on that page too.
update 2
It looks like it might be a Chrome bug for packaged apps. When I remove the "app" section in the manifest, it works! This is a bug since the Chrome app documentation states that apps can have options pages: https://developer.chrome.com/apps/options.html
Options pages are only supported for extensions, you have indeed discovered a documentation bug (I've filed issue 255079).
I created an extension for Google Chrome with this background script background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {code:"document.body.style.background='red !important';"}); // doesn't work
chrome.tabs.executeScript(tab.id, {code:"alert('hello');"}); // runs alert
});
I want to run document.body.style.background='red !important'; in the context of the web page.
How can I do it?
manifest.json:
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"description": "Test",
"browser_action": { "default_icon": "icon.png" },
"background": { "scripts": ["background.js"] },
"permissions": ["tabs", "*://*/*"]
}
Plain and straight. Add https://*/* to permissions.
background actually expects everything, if you want to change the color use backgroundColor and need not give !important as you are injecting after everything is loaded.
So the below change may work. Please try that.
chrome.tabs.executeScript(tab.id, {code:"document.body.style.backgroundColor='red';"});