Question

我不想通过点击扩展程序上的按钮在页面上注入.css！

这是popup.html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/popup.css">
    <script type="text/javascript" src="black.js"></script>
    <script type="text/javascript" src="white.js"></script>
  </head>
  <body style="width: 400px">
    <h1>test v1.0.0</h1>
    <hr ></hr>
    <input type="button" onclick="black" value="Black"/>
    <input type="button" onclick="white" value="White"/>
  </body>
</html>

这是black.js（white.js几乎相同）：

function black() {
    var browserListener = function(tab) {
        chrome.tabs.insertCSS(tab.id, {
            file: "css/black.css"
        });
    }
}

我不知道为什么，但它不起作用。

Answer 1

您也可以尝试：

var blackCss = document.createElement('link');
blackCss.src = "css/black.ss";
blackCss.rel = "stylesheet";

document.head.appendChild(blackCss);

当然，您可以将其包装在函数中并使src路径动态化。

Answer 2

有很多方法可以做到这一点LOTS我想出了一个解决方案，但现在我认为它可能不是最好的但它有效。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<h1>test v1.0.0</h1>

<input id="black" type="button" value="Black"/>
<input id="blue" type="button" value="Blue"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    (function(){


        $('#black').on('click', function(){
            var location = 'black.css';
            var link     = $("<link rel='stylesheet' href='"+ location +"'>");
            $('head').append(link);
        });
        $('#blue').on('click', function(){
            var location = 'blue.css';
            var link     = $("<link rel='stylesheet' href='"+ location +"'>");
            $('head').append(link);
        });


    })();
</script>
</body>
</html>

你可以进一步使用它，并使其成为1函数，只改变css链接上href标记的值。但这也很好。我不建议使用这个确切的代码，但我希望你得到我试图在这里显示

使用按钮在页面上注入.css文件

2 个答案: