Google Chrome extension development: How to make sure id and class attributes do not collide with the ones in the webpage?
I am developing a chrome extension that injects some html into a webpage. The html file is set to be a web accessible resource and is injected using fetch(...). I want to set id and class attributes to elements in this html so that I can style them using css.
How do I make sure the id and class values I use in the html file are unique and do not match any of the values already in the web page the plugin injects into? For example, if I have defined a button with id="myButton", the webpage (eg: amazon.com) may already have an element with the same id. What is the recommended way to make sure this doesn't happen?
At the moment I am styling them using the style attribute. But would like to have them moved to a separate css file.
Comments:
2023-01-21 00:10:02
Use a value that doesn't seem to match, eg d="myButton_b0j4m5".
2023-01-21 00:10:02
use some pre- or postfix for your identifiers and classnames ... You probably can't strictly guarantee that you will never have a collision. But it's quite unlikely that the webpage you are injecting to will have the same prefix
cld582i42-you are using ... Answers(0) :