I want to get a variable from a page's html to load an url with this variable on a new tab. As I am a begginner, I followed Google's "Getting Started" tutorial in which they build an extension that works as popup and I am building around it.
The code that gets the variable works perfectly when I test it on the console, but when I click the button it says "Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')". I imagine it happens because the popup has a separate html, so the javascript is not injected into the page I want.
Is there a quick fix to make the popup access the page's html? If not, how could this feature work in another way?
// Get variable
const client = document.querySelector('[data-client-id]').getAttribute("data-client-id");
// When button is clicked, open new tab and paste URL
var button = document.getElementById("btn1");
button.addEventListener("click", function () {
chrome.tabs.create({ url: "https://www.huggy.app/panel/contacts/" + client });
});
To access the page's html you need a content script.
You can adapt the example found in the documentation:
function injectedFunction() {
return document.querySelector('[data-client-id]').getAttribute('data-client-id');
}
const button = document.getElementById('btn1');
button.addEventListener('click', function() {
chrome.tabs.query({active:true, currentWindow:true},tabs => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: injectedFunction
}, results => {
chrome.tabs.create({url: 'https://huggy.app/panel/contacts/' + results[0].result});
});
});