I'm building a Google Chrome extension and want to autoload my extension on every new page, so that I can get the current url and check in a Database some data for it. I want to do it a bit like the adblockers and show how many ads where blocked with the badgetext. Anyway I don't get it workig to autoload on every new page I open. It loades once and then stays there. It only reloads when I click on the Icon to get the popup.html.
Here my Manifest:
{
"manifest_version": 2,
"name": "Some name",
"description": "Some desc.",
"version": "1.0",
"permissions": [
"tabs",
"background"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
My background.js looks like this
chrome.windows.onFocusChanged.addListener(function(){
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
// do some stuff with the new url
});
});
Someone have a hint?
I would use chrome.tabs API instead of chrome.windows API.
http://developer.chrome.com/extensions/tabs.html
onCreated event and onUpdated event should work.
chrome.tabs.onCreated.addListener(function callback)
chrome.tabs.onUpdated.addListener(function callback)
Related
I am trying to create a Chrome extension that automatically generates a small pop up on the side when the user navigates to a particular site.
I went through the documentation on Chrome's developer page & followed the tutorial but I am not sure how to inject a script when the user visits a particular site. I want the popup to show up only on that particular site. In fact I don't see any console logs inside the addListener section of my background.json
manifest.json
{
"name": "Google helper",
"version": "1.0",
"manifest_version": 3,
"description": "Shows you additional information on google",
"icons": {
"128": "icon128.png"
},
"action": {
"default_icon": {
"128": "icon128.png"
},
"default_title": "Google helper",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"tabs",
"activeTab",
"scripting"
// ,
// "https://google.com/"
]
}
background.js
// Register the service worker
console.log("Here in background.js before anything starts"); // Able to see this log in service worker view
// Called when the user clicks on the action.
chrome.action.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log('Turning ' + tab.url + ' red!'); // Don't see this in logs
chrome.scripting.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
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");
I have a Chrome extension that opens a KML/KMZ file in Google Maps. The extension is triggered when the user right-clicks a link to the KML document. But the context menu does not appear. It uses a background script. Here is the manifest.json:
{
"manifest_version": 2,
"name": "KML/KMZ Viewer",
"version": "1.0.0",
"description": "Can be used to view KML/KMZ Files.",
"icons": {
"19": "tiny.jpg",
"24": "icon.png",
"128": "image.png"
},
"permissions": [
"tabs",
"contextMenus",
"activeTab",
"background"
],
"background": {
"scripts": ["background.js"]
}
}
Here is the background.js:
// Set up context menu at install time.
chrome.runtime.onInstalled.addListener(function() {
menuCreate();
console.log('Issued function');
});
// add click event
chrome.contextMenus.onClicked.addListener(onClickHandler);
// The onClicked callback function.
function onClickHandler(info, tab) {
var url = info.selectionText;
openWin(url);
};
function openWin(kml) {
chrome.windows.create({"url":"http://www.nearby.org.uk/google/fake-kmlgadget.html? up_kml_url="+kml+"&up_view_mode=earth&up_lat=&up_lng=&up_zoom=&up_earth_2d_fallback=1&up_earth_fly_from_space=1&up_earth_show_nav_controls=1&up_earth_show_buildings=1&up_earth_show_terrain=1&up_earth_show_roads=1&up_earth_show_borders=1&up_earth_sphere=earth&up_maps_streetview=1&up_maps_default_type=hybrid"});
}
function menuCreate() {
chrome.contextMenus.create({"title": "Open KML/KMZ", "contexts": ["link"], "id": "kmlopen", "targetUrlPatterns": ["*.kml", "*.kmz"]});
console.log('Function ran');
}
Yet when I right-click on a link to a KML or KMZ file, the context menu doesn't show. According to the JavaScript console, the functions ran. This is what the console outputs when I run chrome.contextMenus.create({"title": "Open KML/KMZ", "contexts": ["link"], "id": "kmlopen", "targetUrlPatterns": ["*.kml", "*.kmz"]}); manually under _generated_background_page.html I get the kmlopen, the id of the menu item. What am I doing wrong? The openWin(/*some url*/); function works fine.
Wrong pattern.
The patterns follow the standard Match pattern format.
So you should use the patterns
"targetUrlPatterns": ["*://*/*.kml", "*://*/*.kmz"]
However, be mindful of query strings.
I have just started developing chrome extension ( Using chrome 34).
My aim is to check for a ID attribute in a site by opening it in multiple languages.
For instance, whenever I open that website, and click on my extension link. The extension should open the website in multiple languages in background, and check if a html "ID" exists.
As a start, I want to get the current URL for that site.
manifest.json -
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
My popup.html is
<script type="text/javascript" src="currentUrl.js"/>
and currentUrl.js is
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
alert(tabs[0].url);
}
);
But it is not working to alert the current URL. Whenever I click extension, just a small blank window appears.
I need to switch English(US) to Japanese and vise versa. Click on an extensions icon and switch this languages. How can I solve this problem?
Here is screenshot of what I need.
I Cant Understand your question Clearly ,
Hope this helps some
Try this Extension Google Translate
I had create a sort of what you are thinking hope it helps
here the manifest and Js file for the extension.
every time u click it will leads to chrome://settings/languages
manifest.json
{
"name": "Language Settings",
"version": "1.0",
"manifest_version": 2,
"description": "Open Language Settings",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": [
"background.js"
]
},
"permissions": [
"tabs"
]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.create({
url: "chrome://settings/languages"
});
});