I'm creating a small extention which when an on-button-click, will open a URL in a new tab.
This is a snippet of part of a function:
var urlLink = "www.google.com";
chrome.tabs.create({ url: urlLink });
However, when the newtab is opened it doesn't go to google.com it puts
chrome-extension://**extentionID**/www.google.com
How do I get it only to go to www.google.com rather than call chrome-extention with the extentionID?
Also I've delcared the following in my manifest.json
"permissions":[
"tabs"
],
Thanks.
Adding
http://
or
https://
to the URL fixes this.
Related
I have some html files inside a Firefox web extension which I want to open on Browser Action event (Click on the tool bar icon). The way I was doing it in chrome was:
var appId = chrome.app.getDetails().id;
var tabUrl = "chrome-extension://" + id + "/src/index.html";
chrome.windows.getCurrent(function (currentWindow) {
chrome.tabs.create({
url: tabUrl
});
});
What I am trying to do fir firefox is:
//firefox doesnt support chrome.app, so I have hard coded the app id in manifest under applications.gecko.id
var id = chrome.runtime.getManifest().applications.gecko.id;
var tabUrl = "moz-extension://" + id + "/src/index.html";
//I have tried chrome-extension:// also above
browser.tabs.create({
url: tabUrl,
active:true
});
Its just opening a new tab with the url but the page is not loading. Any suggestion on what I am doing wrong
In Firefox the URL is constructed as moz-extension://[some GUID here]/, not chrome-extension://[extension ID here]. The GUID is not predictable.
The right way to get the URL for Firefox (and Chrome) is to use chrome.runtime.getURL:
chrome.tabs.create({
url: chrome.runtime.getURL('src/index.html')
});
Another method that works for getting an absolute URL is (only when the code runs in the context of your extension page, not in content scripts):
chrome.tabs.create({
url: location.origin + '/src/index.html')
});
You can also pass a relative URL to chrome.tabs.create:
chrome.tabs.create({
url: '/src/index.html'
});
Note that when you use relative URLs, make sure that you specify the full path (starting with /). This is because Firefox and Chrome resolve relative URLs differently. For example, if you have a script running in a page in a subdirectory "/html/" in your add-on, then Firefox will resolve the URL relative to the subdirectory, whereas Chrome will resolve the URL relative to the extension root. So:
// Running at moz-extension://[guid]/html/page.html
// or at chrome-extension://[id]/html/page.html
chrome.tabs.create({url: 'newpage.html'});
// Firefox: Opens moz-extension://[guid]/html/newpage.html
// Chrome: Opens chrome-extension://[id]/newpage.html
chrome.tabs.create({url: '/newpage.html'});
// Firefox: Opens moz-extension://[guid]/newpage.html
// Chrome: Opens chrome-extension://[id]/newpage.html
I have a AngularJS Project, and when i click refresh inside the gamesList page i get a Blank page.
this is my app.js :
var app = angular.module("app",['ngRoute','superCtrl']);
app.config(routeConnect);
function routeConnect($routeProvider,$locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/',{
templateUrl:'/App/templates/home.html',
controller:'navCtrl'
})
.when('/gamesList', {
templateUrl:'/App/templates/gamesList.html',
controller:'gamesListCtrl'
}));
}
I run the application with http-server and when i hit the refresh button in the log i get :
"Get /gamesList" Error(404):"Not Found"
Also i noticed that in the chrome developer the source is changes:
Before:
After:
Any idea for this problem?
If you don't know what causes this issue, just remove $locationProvider from your .config in app.js...
I removed the $locationProvider so issue is gone but i have to use
`http://localhost:8080/#/home'
But the '#' comes in the url...
You need to configure your server
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I have to make an extension that when clicked on text in the context menu, in callback opens the extension menu popup.
chrome.runtime.onInstalled.addListener(function() {
var context = "selection";
var title = "Google for Selected Text";
var id = chrome.contextMenus.create({"title": title, "contexts":["selection"],
"id": "context" + context});
});
// add click event
chrome.contextMenus.onClicked.addListener(onClickHandler);
// The onClicked callback function.
function onClickHandler(info, tab) {
var sText = info.selectionText;
var url = "https://www.google.com/search?q=" + encodeURIComponent(sText);
//what i have put here to open extension popup
};
In this case, when I click on the menu I open a new tab with this search.
There is no way of opening the default browser action popup programmatically. A work around is use content scripts to open a modal or a lightbox and show the contents of your popup.
Another way would be - within the clickhandler of your context menu item, create a new tab and make it inactive and then pass that tab to chrome.windows.create api to create a new popup window.
chrome.tabs.create({
url: chrome.extension.getURL('popup.html'),
active: false
}, function(tab) {
// After the tab has been created, open a window to inject the tab
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true
});
});
It is just a work around. Hope it helps.
It is now possible to open a browser action popup programmatically from inside the handler for a user action.
browser.menus.create({
id: "open-popup",
title: "open popup",
contexts: ["all"]
});
browser.menus.onClicked.addListener(() => {
browser.browserAction.openPopup();
});
You can read more about it here.
Edit:
This feature is only available as of Firefox 57. In Chrome, it is only available in the dev channel.
Sources: chrome/common/extensions/api/_api_features.json - chromium/src - Git at Google
Unfortunately, it cannot be done.
Chrome API doesn't provide a method to open extension popup programmatically. The Chromium team rejected the feature request for such an option with an explanation that:
The philosophy for browser and page action popups is that they must be
triggered by user action.
Here's the source.
You can use the chrome.window API (documentation here).
What you want is something like this :
chrome.windows.create({
url : "http://yourPopupUrl.com"
focused : true
type : "popup"});
This will open a new windows in popup mode (without the top menu bar) and load the "http://yourPopupUrl.com".
Is this possible for chrome extension to get all the URLs in all tabs using chrome extension ?
I have got the url of current Tab using this code
chrome.tabs.getSelected(null, function(tab) {
tabUrl = tab.url;
alert(tabUrl);
});
We need the following permissions in manifest.json file
"permissions": [
"tabs"
]
My question is to find out the URLs in all tabs ?
You could do something like this:
chrome.windows.getAll({populate:true},function(windows){
windows.forEach(function(window){
window.tabs.forEach(function(tab){
//collect all of the urls here, I will just log them instead
console.log(tab.url);
});
});
});
With chrome.tabs.query method, you can also simply do,
chrome.tabs.query({},function(tabs){
console.log("\n/////////////////////\n");
tabs.forEach(function(tab){
console.log(tab.url);
});
});
I am new to Chrome extension. I have a question about how to make the extension to open a "Help" page automatically after installation. Currently, I am able to check whether the extension is running the first time or not by saving a value into localStorage. But this checking is only carried out when using click the icon on the tool bar. Just wondering if there is a way that likes FF extension which uses the javascript in to open a help page after the installation. Thanks.
Edit:
Thanks for the answer from davgothic. I have solved this problem.
I have another question about the popup. My extension checks the url of current tab,
if OK(url){
//open a tab and do something
}
else{
//display popup
}
Is it possible to show the popup in this way?
Check this updated and most reliable solution provided by Chrome: chrome.runtime Event
chrome.runtime.onInstalled.addListener(function (object) {
let externalUrl = "http://yoursite.com/";
let internalUrl = chrome.runtime.getURL("views/onboarding.html");
if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
chrome.tabs.create({ url: externalUrl }, function (tab) {
console.log("New tab launched with http://yoursite.com/");
});
}
});
Add this to your background.js I mean the the page you defined on manifest like following,
....
"background": {
"scripts": ["background.js"],
"persistent": false
}
...
UPDATE: This method is no longer recommended. Please see Nuhil's more recent answer below.
I believe what you need to do is put something like this into a script in the <head> section of your extension's background page, e.g. background.html
function install_notice() {
if (localStorage.getItem('install_time'))
return;
var now = new Date().getTime();
localStorage.setItem('install_time', now);
chrome.tabs.create({url: "installed.html"});
}
install_notice();
As of now (Aug 2022) the right way to execute code on first install or update of an extension using Manifest V3 is by using the runtime.onInstalled event.
This event is documented here: https://developer.chrome.com/extensions/runtime#event-onInstalled
There is one example for this exact case in the docs now:
https://developer.chrome.com/docs/extensions/reference/tabs/#opening-an-extension-page-in-a-new-tab
Note: This example above is wrong as the callback function parameter is Object with the key reason and not reason directly.
And another example here (this one is correct but does not open a tab):
https://developer.chrome.com/docs/extensions/reference/runtime/#example-uninstall-url
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
// Code to be executed on first install
// eg. open a tab with a url
chrome.tabs.create({
url: "https://google.com"
});
} else if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
// When extension is updated
} else if (details.reason === chrome.runtime.OnInstalledReason.CHROME_UPDATE) {
// When browser is updated
} else if (details.reason === chrome.runtime.OnInstalledReason.SHARED_MODULE_UPDATE) {
// When a shared module is updated
}
});
This code can be added to a background service worker: https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/
It would be better to place a "version" number so you can know when an extension is updated or installed.
It has been answered here:
Detect Chrome extension first run / update
All you need to do is adding the snippet below to your background.js file
chrome.runtime.onInstalled.addListener(function (object) {
chrome.tabs.create({url: `chrome-extension://${chrome.runtime.id}/options.html`}, function (tab) {
console.log("options page opened");
});
});