Research alternative methods for injecting code into the Page Context in Flottform extension

[TamaraBogantseva]

Summary

This research task explores different techniques for injecting code, including classes and functions, into the page context within the Flottform Extension. The primary focus is to identify reliable and efficient methods to access variables and functions within the page context, as detailed in this Stack Overflow thread.

Goal

The objective is to enhance our approach for injecting code into the page context by identifying new techniques that offer better performance, security, or functionality. Understanding these methods may allow for more seamless access to page-level variables and functions directly from the extension, expanding its flexibility and reliability.

Research Steps / To Do

• Review the Stack Overflow discussion and test suggested methods for injecting code into the page context.
• Compare each method based on effectiveness, compatibility, and ease of implementation.
• Evaluate potential security implications for each approach, especially for methods involving access to sensitive page data.
• Document findings, including pros and cons of each method and recommendations for future use.

References

Stack Overflow: Methods for Accessing Variables and Functions in Page Context

Documentation and Recommendations

After completing the research, summarize each method, noting the most effective techniques for injecting code specifically into the page context. Include potential best practices for implementing these methods in the Flottform Extension, along with any required code samples or additional references.

[nidhal-labidi]

For now we're bundling everything from the module flottform/forms into 2 files: content-script.js and content-script.js.map.
Then we inject that script into the page context as follows:

// Inject the bundled file into the page context
await chrome.scripting.executeScript({
	target: { tabId: currentTabId! },
	files: ['/scripts/content-script.js']
});

Those bundled files are created using the command pnpm run build:content after navigating inside flottform/forms. It's using vite.config.content.ts as a configuration file.