Inject boostrap css modify the main page

Question

I am trying to create a sidebar instead to popup using chrome extension but when I inject bootstrap CSS into the sidebar the main page is modified. In this case, I tried to open the sidebar into Google page and it removes the google's icon.

this is the code that i used:

var href = chrome.extension.getURL("/styles/bootstrap.min.css");
var inputTag = '<link id="myLink" rel="stylesheet">\n' +
'<form>' +
'<div class="well" style="height: 64px; background: white;">' +
'   <button id="editButton" type="submit" class="btn btn-primary btn-xs" style="float: right; color: coral; display: none">Edit</button>\n' +
'   <button id="createNewButton" type="submit" class="btn btn-primary btn-xs" style="float: right; color: coral;">New</button>\n' +
'</div>\n' +
'</form>';

var Sidebar = {

DOM_ID: "my_sidebar",
sidebar: null,
isOpen: false,

CSS_COMMON: "\
    position:fixed;\
    top:0px;\
    right:0px;\
    width:325px;\
    height:100%;\
    padding:8px;\
    background:white;\
    border-left: 2px solid #999;\
    z-index:9999999999;\
    overflow:scroll;\
",

init : function(){

},

open : function() {

    if (!Sidebar.sidebar){

        // create new sidebar
        var sidebar = document.createElement('div');
        sidebar.id = Sidebar.DOM_ID;

        Sidebar.sidebar = sidebar;
        document.body.appendChild(Sidebar.sidebar);
        var getSideBar = document.getElementById('my_sidebar');
        getSideBar.innerHTML = inputTag;
        var url = document.getElementById("myLink");
        url.setAttribute("href", href);
    }

    Sidebar.sidebar.style.cssText = Sidebar.CSS_VISIBLE;
    Sidebar.isOpen = true;

    return Sidebar.sidebar;
},

Could someone help me with this issue?

You're not injecting bootstrap into the sidebar, you're injecting it into the page and of course it will affect it. You could use an `` or shadow DOM to keep things separated. — Titus, Aug 06 '18 at 16:43
Possible duplicate of [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/questions/12783217/how-to-really-isolate-stylesheets-in-the-google-chrome-extension) — wOxxOm, Aug 06 '18 at 16:46
Thank you so much for your answer, also I used iframe before but when I put some elements on it i cannot click any element into the iframe. Do you know some suggestion for this issue? — user2142558, Aug 08 '18 at 15:19

Inject boostrap css modify the main page

0 Answers0