I am developing an firefox extension using webExtensions that would help me ease my work with the scenario below.
I have to click around 50-60 butto
Your content script is in a different context/scope from that of page scripts (scripts that already exist in the webpage). Your content script has higher privileges than are granted to page scripts. Keeping content scripts separate from page scripts is a normal architecture for browser extensions, which is done for security reasons.
Because your content script is in a different context from page scripts, you can't directly access functions and variables that are defined in page scripts from your content script. There are a few different ways which you can access information in the page context. The cross-browser method of doing so is to cause some specific parts of your code to execute in the page context. I find the most convenient, and cross-browser compatible, way to do so is to create and insert a element into the page's DOM containing the code you want to execute.
You could do something like:
function updateTask(id) {
let newScript = document.createElement('script');
newScript.innerHTML='updTask(' + id + ');';
document.head.appendChild(newScript);
//newScript.remove(); //Can be removed, if desired.
}
The added script gets run in the page context because it is now a element in the DOM. The browser recognizes that a
element was added and evaluates it (executes the code contained) as soon as the script which inserted it is no longer processing. It does basically the same thing for any other element you add to the DOM. Because it is part of the page, the code inside the gets run in the page script context/scope.
There are a variety of ways to communicate between code you have running in the page context and your code in the content script context. My preferred method of doing so is to use CustomEvents. I describe why in the first part of this answer. Generally, I use at least one custom event type to communicate from the page context to the content script context and another from the content script context to the page context. You can use as many CustomEvent
types as you want. I'll often use multiple events, each communicating a different thing, rather than a single event type out of which I parse several different types of messages.
The easiest way to maintain code which you are going to execute in the page context is to write it as a function in your content script, then inject that function into the page context. Here is some generalized code which will do that while passing parameters to the function you are executing in the page context:
This utility function, executeInPage()
, will execute a function in the page context and pass any provided arguments to the function. Arguments must be Object, Array, function, RegExp, Date, and/or other primitives (Boolean, null, undefined, Number, String, but not Symbol).
/* executeInPage takes a function defined in this context, converts it to a string
* and inserts it into the page context inside a