Issue with implementing content scripts

143 views
Skip to first unread message

Sumit Kumar

unread,
May 7, 2024, 5:06:41 AM5/7/24
to Chromium Extensions
Hi All,
I have a use case in which a modal will show on screen whenever a certain criteria is met. I tried different approaches but none of them seem to be working.

Approach 1: registerContentScripts, unregisterContentScripts
The issue that I faced with this approach is the modal is not showing immediately. I need to reload the tab in order to show the popup but I want to show right away once the criteria is fulfilled. The unregisterContentScripts() is working as expected. I am able to unregister the content scripts on close button click in the modal.

Approach 2: executeScript
Using this I was able to immediately show the popup which is the expected behaviour but there is no way to remove the content script. So, when the criteria is again fulfilled it is throwing me error mentioning that the identifiers are already declared.

Please help me in resolving this issue. I am looking forward to any suggestions that will make it work.

Thanks

Oliver Dunk

unread,
May 7, 2024, 6:11:09 AM5/7/24
to Sumit Kumar, Chromium Extensions
Hi Sumit,

I think both approaches are valid and would lead to different tradeoffs.

Assuming you don't show this modal too often, I would lean towards executeScript so you don't have to inject something on every page.

To avoid duplicate identifier errors, you can wrap your code in a conditional. For example:

if (!('modal-setup' in window)) {
  window['modal-setup'] = true;
  // Do your initialization here.
}

Then outside of the conditional, only include the code which needs to run every time (for example actually showing the modal).
Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB


--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/b2fea239-a8ca-4015-b56a-d6a1f6df8748n%40chromium.org.

wOxxOm

unread,
May 7, 2024, 7:09:53 AM5/7/24
to Chromium Extensions, Oliver Dunk, Chromium Extensions, Sumit Kumar
+1 for executeScript.

> To avoid duplicate identifier errors, you can wrap your code in a conditional. For example:

That example will fail when the page has a DOM element with id="modal-setup", which per the specification creates an implicit global variable also in the isolated content script!

Here's a fixed example:

// using a literal 1 to ignore a DOM element with id="INIT" which is exposed as a global variable INIT
if (window.INIT !== 1) {
  window.INIT = 1;
  // Do your initialization here.
}

If your code uses `function` or `var` then wrap it in IIFE like this:

// using a literal 1 to ignore a DOM element with id="INIT" which is exposed as a global variable INIT
if (window.INIT !== 1) (() => {
  window.INIT = 1;
  // Do your initialization here.
})();

Message has been deleted
Message has been deleted
Message has been deleted
Message has been deleted

Sumit Kumar

unread,
May 7, 2024, 8:57:34 AM5/7/24
to Chromium Extensions, Chromium Extensions

Thank you for the responses. I will definitely try your solutions.

However, I have doubts in understanding the working of registerContentScript() and executeScript() methods. It is not quite clear from the docs about the below points.

1. Does the registerContentScript() method only include the script in the page or execute it as well?
2. On registering a script using registerContentScript() why it needs a reload to execute the script? 
3. When I used executeScript(), the script executed immediately but on calling the getRegisteredScripts() it returned me an empty array. Why?
4. What are the key differences between executeScript() and registerContentScript() and when to use which one?

Thanks

Oliver Dunk

unread,
May 7, 2024, 9:03:23 AM5/7/24
to Sumit Kumar, Chromium Extensions
registerContentScripts() adds your script to a list of scripts to execute when a page loads. Since the page has already been loaded, it won't run on any existing documents. When you perform a reload, the page loads again however so the script is run.

With executeScript, you are executing the script once and once only. getRegisteredScripts() returns an empty array since there are no scripts registered for future page loads.

I hope that helps, and from that you can make some decisions as to when each is best. Let us know if you have any other questions though.

Oliver Dunk | DevRel, Chrome Extensions | https://developer.chrome.com/ | London, GB

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
Reply all
Reply to author
Forward
0 new messages