注入boostrap CSS修改主页

时间:2018-08-06 16:36:18

标签: javascript css google-chrome-extension

我正在尝试创建一个侧边栏,而不是使用chrome扩展名弹出窗口,但是当我将引导CSS注入侧边栏时,会修改主页。在这种情况下,我尝试将侧栏打开到Google页面中,并删除了Google的图标。enter image description here

这是我使用的代码:

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;
},

有人可以帮我解决这个问题吗?

0 个答案:

没有答案