1

I am developing a chrome extension.

I need show popover on the double click on the word. Therefore I inject bootstrap popover:

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["3rdparty/jquery-3.2.1.min.js",
               "3rdparty/bootstrap-3.3.7.min.js", ...],
        "css": ["3rdparty/bootstrap-3.3.7.min.css"],
        "run_at": "document_end"
    }
  ]

But this injection of css affects some pages. Some artifacts can appear.
How can I properly inject popovers?

MrPisarik
  • 1,260
  • 1
  • 11
  • 21
  • 1
    *Please* don't load jQuery into **every** page (`content_scripts` with your `matches`) unless you **need** to. jQuery is 85kiB of minimized code. This is a significant burden with which to saddle *every single page*. What of those of us who have 100's of tabs open? Inject only the very minimum that it needed to allow the user to just *start* interacting with your extension. Then inject more once the user makes the choice to do so. The minimal portion should be able to be just a minimal vanilla JavaScript event handler and a UI element or two. – Makyen Apr 24 '17 at 05:29
  • @Makyen, thank you for remark! This is not an optimization stage for now, but I'll take this into account. Although for 100 tabs the overhead will be 8.5miB (for my extension ~12miB to be precise). Is it so much with comparison to memory taken by all tabs? – MrPisarik Apr 24 '17 at 16:31
  • Well, I've had times when I've routinely had 700+ tabs in 20+ windows (not currently), and 27 extensions currently active (and another 40+ currently disabled). So, if all of those active extensions were indiscriminately loading code it would be 1.5GiB (of just minimized code). The 85kiB is just a gauge of the overall resources required, including memory and the additional compute resources that are needed for them to load in each URL. All of those libraries, usually, have to load prior to the page being displayed, which affects the user's perception of how responsive the browser is. – Makyen Apr 26 '17 at 07:54
  • 1
    A single library, or two, is not going to break things, usually, but it may contribute to the user getting frustrated. Even a single library isn't all *that* bad, but the comment is mostly intended to get you, and others, thinking about the resources which are taken up by the choices made when developing your code. Hopefully, it will result in fewer extensions [like this one](http://stackoverflow.com/q/39054125/3773011), which loads 78 different scripts/libraries into every HTTPS URL. – Makyen Apr 26 '17 at 08:02

1 Answers1

2

You need isolate bootstrap classes

check this links:

How to really isolate stylesheets in the Google Chrome extension?

How to Isolate Bootstrap CSS to Avoid Conflicts

Community
  • 1
  • 1
Ivan Pazhytnykh
  • 36
  • 3