I want to modify the DOM, which api should i use ?

I basically want to take a name of a text and bold it. example
original:
Hello World

modified:
Hello World

Sam•5/28/24, 10:56 PM

Probably just need a main world content script to do the work.

SSam Probably just need a main world content script to do the work.

Tsuni•5/28/24, 11:01 PM

I’m not sure you need a main world content script for that? You can add classes to arbitrary elements and whatnot from CSUI which I’m pretty sure isn’t main world

Arcane•5/28/24, 11:01 PM

@Tsuni has reached level 1. GG!

Sam•5/28/24, 11:03 PM

Maybe not a main world, but I've found that it depends on what part of the DOM or browser API you want to access. For example I don't think you can access global JS variables outside of MAIN world or even LocalStorage.

Sam•5/28/24, 11:04 PM

So for example say you wanted to update the text of a button on the google home page. It currently says "Google Search" and you want it to be something else. In this case I would create a contents script like this.

export const config: PlasmoCSConfig = {
  matches: ['https://*.google.com'],
  world: 'MAIN',
  run_at: 'document_end',
};

const button = document.querySelector('[aria-label="Google Search"]');
if(button) {
  button.value = 'Search';
}

export const config: PlasmoCSConfig = {
  matches: ['https://*.google.com'],
  world: 'MAIN',
  run_at: 'document_end',
};

const button = document.querySelector('[aria-label="Google Search"]');
if(button) {
  button.value = 'Search';
}

I haven't actually tested this but it should work.

Sam•5/28/24, 11:05 PM

Now in your case you'll probably need to use a mutation observer to detect changes. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

But that all depends on if your needs. If its a SPA you'll prob need the observer, if its just a webpage that loads every page you visit then this script should work.

MDN Web Docs

MutationObserver - Web APIs | MDN

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

SSam So for example say you wanted to update the text of a button on the google home ...

Tsuni•5/29/24, 2:53 AM

This JS works on this HTML, too.

export const config: PlasmoCSConfig = {
  matches: ['http://*:*/*'],
};

const input = document.getElementById("target") as HTMLInputElement;
if (input) {
  input.value = "Hello World";
}

export const config: PlasmoCSConfig = {
  matches: ['http://*:*/*'],
};

const input = document.getElementById("target") as HTMLInputElement;
if (input) {
  input.value = "Hello World";
}

<html>
<body>
  <input value="Search" type="submit" id="target"></input>
</body>
</html>

<html>
<body>
  <input value="Search" type="submit" id="target"></input>
</body>
</html>

My understanding is that the "main" world is the context of the page's JS and its globals. It would be bad to have every extension running in that same namespace, because if they were to, for example, reassign a global it would break other extensions that relied on that global. I don't think it has much, if any, effect on what you can do with the DOM, since that's not JS.

ibrahimyaacobOP•5/29/24, 7:20 AM

im not following your answer. i just need help to get the base code to modify DOM and add the bold tag

Sam•5/29/24, 3:35 PM

That is code that will modify the DOM. You create a content script that runs on the specified domain (

matches

matches

) and once the document has been parsed it'll execute the code.

export const config: PlasmoCSConfig = { matches: ['https://*.google.com'], world: 'MAIN', run_at: 'document_end', }; const button = document.querySelector('[aria-label="Google Search"]'); if(button) { button.value = 'Search'; }