1

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.

ansh mehta
  • 11
  • 2
  • Are you trying to access the 'document' of the page you are viewing, or the popup? To access the page's html you need to write a user script. – Jason Goemaat May 24 '21 at 22:29
  • @JasonGoemaat I am trying to access an element in the page I am viewing. How would I go about writing and executing a user script? Is it different than just injecting a content script. I since updated the code to refer to a file instead of a function and put my code in the file. – ansh mehta May 24 '21 at 22:39
  • DOM elements don't have `miscfunction`. If that is a custom function added by the page then you need to go a level deeper and run code in [page context](/a/9517879). Please clarify. – wOxxOm May 25 '21 at 03:30
  • @wOxxOm Indeed, the function belongs to an external API that is added by the page. Sorry for the late response. – ansh mehta Jun 01 '21 at 03:34

1 Answers1

1

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
  }
})
Zhang Chandra
  • 81
  • 1
  • 6
  • While not indicated explicitly in the question but the author is already running setPageBackgroundColor as a content script in the web page by using executeScript as shown in the tutorial link. The problem is `miscfunction` and I've asked for clarification on that. – wOxxOm May 25 '21 at 03:36
  • @wOxxOm I see. I didn't look at the tutorial. I will still leave my answer here for the benefit of others. – Zhang Chandra May 25 '21 at 16:25