Hello !
How do I retrieve the URL of the tab from which I open a popup window by clicking on the extension button?
I’ve try this, read on this forum, but it don’t work:
console.log((await browser.tabs.query({ active: true, lastFocusedWindow: true }))[0].url)
le manifest:
{
"manifest_version": 2,
"name": "parameters",
"version": "1.0",
"description": "Ajoute des paramètres à la page Web active",
"permissions": [
"activeTab",
"tabs"
],
"browser_action": {
"default_icon": {
"32": "icons/test.svg"
},
"default_title": "parameters",
"default_popup": "popup/choose_parameters.html"
}
}
If there isn’t a shortcut, you could switch how you define the default_popup. Remove it from the manifest, and use a background script:
// Listen for the button click and show the popup
browser.browserAction.onClicked.addListener((currTab) => {
// Record/store currTab details needed in the popup
/* You supply this code */
// Open popup
browser.browserAction.openPopup();
});
// Define the browser action popup page
browser.browserAction.setPopup({
popup: browser.extension.getURL('popup/choose_parameters.html')
});
Then your popup can either access storage or message the background script for the information.
If you absolutely want use a default_popup instead of jscher2000’s solution:
In the background page, use tabs.onActivated to store the active tab’s ID in a variable.
The popup can then send a message to the background script and receive the tab ID in the reply.
Hi, I can’t make it, I need help.
What I coded isn’t working.
Instead of asking where the error in the code is, I prefer to ask where the error in reasoning is.
I describe below what I want to achieve and how I do it, could you tell me where I am wrong?
It seems strange to me that the backgroud sends a message to a content_script while it is not loaded yet (at the moment of the click)…
But maybe because the backgroud is always running, it stores the message until the content_script is loaded?
Or should I add a “await”?
Objective:
On a website, a click on the extension icon opens a popup.
This popup contains a form that allows you to choose parameters.
Sending the form opens a new tab, with the website URL + popup settings.
Reasoning:
In the manifest:
declaration of a background.js script,
declaration of an icon associated with a browser_action to react to the click on this icon.
In backgroud.js:
addition of an event handler triggered by clicking on the icon that retrieves the website URL.
sending a message containing the website URL to a content_script choose_parameters.js
declaring an HTML choose_parameters.html popup
opening of this popup
In the choose_parameters.html popup:
loading a content_script choose_parameters.js
In the choose_parameters.js:
addition of an event handler triggered by clicking on the “submit” button.
this event handler:
retrieves parameters with getElementByName
retrieves the URL sent by background.js
concatenates URL and parameters
opens a new tab with the new URL
If this reasoning is wrong, it is normal that my code does not work…
Would you help me please ?
With my thanks.
I think it’s better to let your popup script request the information from the background script. Here’s an example modified from some actual code, but I haven’t tested this:
/*** for background ***/
// Listen for the button click and show the popup
let tabUrlText;
browser.browserAction.onClicked.addListener((currTab) => {
// Record/store currTab details needed in the popup
tabUrlText = currTab.url;
// Open popup
browser.browserAction.openPopup();
});
// Define the browser action popup page
browser.browserAction.setPopup({
popup: browser.extension.getURL('popup/choose_parameters.html')
});
// Handle request from popup
function handleMessage(request, sender, sendResponse) {
if ("want" in request) {
if (request.want == "tabUrl") {
sendResponse({
tabUrl: tabUrlText
});
return true;
}
}
}
browser.runtime.onMessage.addListener(handleMessage);
/*** for popup ***/
browser.runtime.sendMessage({
want: "tabUrl"
}).then((oResponse) => {
console.log(oResponse.tabUrl);
}).catch((err) => {
console.log('Problem getting tabUrl: '+err.message);
});
Thus, it is not the browser that sends a message and the content_script that is listening but the opposite.
This principle seems more consistent to me.
I’ll try that and I’ll let you know.
Use the </> button or three backticks to wrap code into markdown code blocks. To give a syntax highlighting hint, you can specify the language immediately after the three starting backticks, similar to github for example.
Hello, thank you freaktechnik.
here is the same message, more readable:
I tried the following, it doesn’t work.
/*** From background ***/
js
// Listen for the button click and show the popup
let tabUrlText;
browser.browserAction.onClicked.addListener((currTab) => {
// Record/store currTab details needed in the popup
tabUrlText = currTab.url;
// Open popup
browser.browserAction.openPopup();
});
// Define the browser action popup page
browser.browserAction.setPopup({
popup: browser.extension.getURL('../popup/choose_parameters.html')
});
// Handle request from popup
function handleMessage(request, sender, sendResponse) {
if ("want" in request) {
if (request.want == "tabUrl") {
sendResponse({
tabUrl: tabUrlText
});
return true;
}
}
}
browser.runtime.onMessage.addListener(handleMessage);
/*** From popup/choose_parameters.html ***/
The same code as mentioned above
/*** Frome popup/choose_parameters.js ***/
js
let CurrentURL;
let categorie;
let selectdestinationElmt;
let marque;
/**
* S'il y a une erreur d'execution du script,
* Affiche le message d'erreur du popup, et cache le reste du popup.
*/
function reportExecuteScriptError(error) {
document.querySelector("#popup-content").classList.add("hidden");
document.querySelector("#error-content").classList.remove("hidden");
}
/**
* Ecoute les clics sur les boutons et envoie le message correspondant au
* content script dans la page.
*/
function listenForClicks() {
document.addEventListener("click", (e) => {
/**
* Récupère les informations du popup,
* puis envoie le message au script d'arrière plan.
*/
if (e.target.classList.contains("envoi")) {
// Récupérer la catégorie
var selectsourceElmt = document.getElementByName("category");
categorie = selectsourceElmt.options[selectsourceElmt.selectedIndex].value;
// Récupérer la marque
var selectdestinationElmt = document.getElementByName("brand");
marque = selectdestinationElmt.options[selectdestinationElmt.selectedIndex].value;
// concaténer
if (categorie == 2) {
var newURL = CurrentURL + '/recherche?category=' + categorie + '&brand=' + marque;
} else {
var newURL = CurrentURL + '/recherche?category=' + categorie + '&moto_brand=' + marque;
}
// Ouvrir un nouvel onglet avec l'URL requête
browser.tabs.create({
url: newURL
});
}
});
}
/** Au chargement de la page,
* envoie une requête au background script
* qui retourne l'URL de l'onglet actif au moment de l'appui sur le bouton
*/
browser.runtime.sendMessage({
want: "tabUrl"
}).then((oResponse) => {
CurrentURL = oResponse.tabUrl;
listenForClicks();
console.log(oResponse.tabUrl);
}).catch((err) => {
reportExecuteScriptError(err);
console.log('Problem getting tabUrl: ' + err.message);
});
This occurs when you open the popup? It could indicate that the last line of the background script (browser.runtime.onMessage.addListener(handleMessage);) never ran due to an error earlier in the script.
Hello jsher2000, thanks for your answers.
This error message appears even before I click the button to open the popup.
This is what is displayed when, just after installing the extension, I click on the deboggage button.
Then, when I click on the extension button, the popup opens correctly and I can select the items from the choice lists.
But when I click on the “send” button, it produces the same effect as pressing the extension button: it is again the popup that opens with the choice lists…
