Want to Create Chrome Extension like Tool Tip - google-chrome

I am new to google Chrome Extension i have create Google Chrome Extension like as :
Using this code :
manifest.json:
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
and background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
my google Chrome Extension will be open like popup but want to open my app like tooltip like this
So Please help me how to open app like this..
Thanks

You should create an extension instead of an application, and add popup in the manifest.
Look at this:
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Calculator",
"default_popup": "window.html"
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
You can read docs https://developer.chrome.com/extensions/browserAction

Related

Preact Chrome extention Manifest warning regarding icons type

Setting up a Preact Chrome extension and getting a warning of Manifest: property 'icons' ignored, type array expected. Although manifest.json seems to be set correctly. Chrome extention warning.
manifest.json
{
"manifest_version": 3,
"name": "name",
"version": "1",
"action": {
"default_icon": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
}
},
"description": "descr",
"icons": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
},
"chrome_url_overrides": {
"newtab": "index.html"
},
"permissions": [
"activeTab",
"storage"
]
}

Chrome extension: extension logo image doesn't appear or get loaded although specified in manifest file

I click the button in https://chrome://extensions and it loads my extension. However the image/logo of the extension is the default one instead of the one I provided:
manifest.js:
{
"name": "My App",
"version": "1.0.0",
"description": "My extension doesn't do anything yet!",
"manifest_version": 2,
"background": {
"persistent": false,
"scripts": ["js/clear_history.js"]
},
"icons": {
"48": "images/logo.svg",
"96": "images/logo.svg"
},
"browser_action": {
"default_icon": "images/logo.svg"
},
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"permissions": ["history", "storage"],
"web_accessible_resources": ["logo.svg"]
}
Project directory:
How do I fix it?
EDIT:

alert/confirm doesn't work in chrome app - missing config?

I made a chrome app to display my web by webview tag, but the js API alert()/confirm() doesn't work. That made me wondering. Chrome app needs to config something to support confirm?
this is my manifest.json:
{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": 2,
"name": "Performance Monitor",
"version": "1.0",
"description": "A performance monitor to show cpu and memory status.",
"icons": {
"16": "img/ccloud.png",
"48": "img/ccloud.png",
"128": "img/ccloud.png"
},
"permissions": [
"webview"
],
"webview": {
"partitions": [
{
"name": "static",
"accessible_resources": ["header.html", "footer.html", "static.png"]
},
{
"name": "trusted*",
"accessible_resources": ["local_*.html", "*.png", "*.js"]
},
{
"name": "trusted-audio",
"accessible_resources": ["*.mp3"]
}
]
}
}

Chrome extension access webrequest headers

I'm trying to write simple extension that would act on request headers.
In documentation there is something about chrome.WebRequest, but I have no idea how to make it work....
When I put listener to content page, chrome.WebRequest is undefined, when I put it to background section, totally nothing happens...
manifest
{
"manifest_version": 2,
"name": "RequestSpy",
"version": "0.1",
"description": "HTTP/S Request Analizer",
"background": [
{
"scripts": ["scripts.js"]
}
],
"icons":{
"128":"spy.png"
},
"permissions": [
"*://*/*","webRequest"
]
}
script.js
alert('haha');
chrome.webRequest.onHeadersReceived.addListener(function(details){
console.log(details);
alert('huhu');
});
Any help?
manifest.json
{
"name": "OnRequest",
"version": "1.0",
"description": "I can't has cheezburger!",
"permissions": ["webRequest",
"webRequestBlocking",
"http://*/*",
"https://*/*"],
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2
}
background.js
chrome.webRequest.onHeadersReceived.addListener(function(e){
alert("onHeadersReceived");},{urls: ["http://*/*", "https://*/*"]}, ["blocking"]
);

chrome extension javascript problem

I started trying to write chrome extension and I'm having problem with simple function:
script inside "backgroound.html":
chrome.tabs.onUpdated.addListener(function(tabId,changedInfo,tab){alert("a")});
manifest.json file:
{
"name": "ogys",
"version": "1.0",
"description": "description",
"browser_action": {
"default_icon": "icon.png",
"background_page": "background.html"
},
"permissions": ["tabs", "http://code.google.com/"]
}
I understand that an change on any tab would trigger the event but nothing happends.
According with code.google.com, you've defined the backround_page in the wrong place.
Move the background_page property definition outer from browser_action action in this way:
{
"name": "ogys",
"version": "1.0",
"description": "description",
"browser_action": {
"default_icon": "icon.png"
},
"background_page": "background.html",
"permissions": ["tabs", "http://code.google.com"]
}