CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
ansh mehta
ansh mehta

Reputation: 11

Can't access document element in chrome extension

I am currently making a chrome extension using the following Chrome tutorial: https://developer.chrome.com/docs/extensions/mv3/getstarted/

I ran into some issues with my own code initially so now I'm just using their code as a basis for my own thing.

In popup.js, the tutorial has a function that changes the background color on click.

function setPageBackgroundColor() {
    chrome.storage.sync.get("color", ({ color }) => {
        document.body.style.backgroundColor = color;
});

I replaced the line in the code instead to what I wanted it to do.

document.getElementById(xyz).miscfunction(arg1, arg2);

The getting started extension works as intended (obviously). When I run my line of code in the console in Chrome, it works exactly as intended. However, when I run the line using the extension, it gives me the following error:

Uncaught TypeError: document.getElementById(...).miscfunction is not a function

I have tested and found out that getElementById is indeed getting the element I want because when I try to run this on a tab that does not have said element, it gives me an error saying that the element is null. It does not do so for the tab that actually does have the element.

What is preventing my extension from being able to access the miscfunction? When I was last trying to debug this months ago, I recall having some issues with injection and the content security policy but I do not remember what I did to get to that point. Any help would be appreciated.

EDIT:

I have since updated the popup to call a script js file instead of calling a function, and then put the function in a separate file.

Upvotes: 1

Views: 1547

Answers (1)

Zhang Chandra
Zhang Chandra

Reputation: 121

To access the document element of the page you are viewing, you need to paste the required code in the content script.

You first need to add content script and it's scope in manifest.json

"content_scripts" : [{
  "matches" : ["https://<website-you-are-working-on>"]
  "js" : ["script.js"] //file containing the code you need to execute
  }]

The pop up script now needs to send message to content script to do what you want to do.

popup.js

chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    const activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {
      "action" : "change-background"
      "payload": {
         //required info
      }
    })});

Now listen for the message in the content script and do the required task.

script.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if(message.action == "change-background"){
    //your code here
  }
})

Upvotes: 2

Related Questions