Question

假设我设计了一个具有四种模式的chrome扩展，然后我选择一种模式来更改页面的内容脚本并更改页面。但是如果我进入另一个页面，这种模式不起作用。我把我的设置放在弹出页面中的模式'JavaScript。我希望当我进入其他页面时，该模式也可以工作。如果我关闭了chrome软件，然后再次打开它，扩展名可以是我之前选择的模式吗？这可以解决吗？我的代码在这里。 popup.js

var colorMode = 0;
var temp = 0;
var flag = 1;
function transUp(){

if (flag){
    flag = 0;
}
else{
    colorMode = temp + 1;
    if(colorMode == 6) colorMode = 0;
}
chrome.tabs.executeScript(null, {code:"colorChange('" + colorMode + "')"}); 
temp = colorMode;
colorMode++;
if(colorMode == 6) colorMode = 0;
}


document.addEventListener('DOMContentLoaded', function () {
document.getElementById("up").addEventListener('click',transUp);
});
popup.html

<!doctype html>
<html>
  <head>
    <title>Set Page Color Popup</title>
    <style>
    *{
        margin: 0;
        padding: :0;
    } 
    .container{
        overflow:hidden;
        width:74px;
        height:74px;
        margin:10px;
    }
    #up{
        background: url(up.png) center no-repeat;
        background-size: 28px 28px;
        margin: 3px 0 0 3px;
    }
    #up:hover{
        box-shadow: 0 0 5px #000;
    }

    div div{
        width: 32px;
        height: 32px;
        border: 1px #000 solid;
        float: left;
        cursor: pointer;
    }

    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <div class="container">
        <div id="up"></div>
    </div>
  </body>
</html>

contentscript.js

var colorFont=['#fff','#feff00','#fff','#feff00','#fff','#fff'];
var colorBack=['#000','#000','#0000bf','#0000bf','#00ff00','#ff0000'];
var colorNum = 0;
function colorChange(color){
    colorNum = color;
    doTrans(colorNum);
}
function doTrans(colorKey){
    var tags = document.body.getElementsByTagName('*');
    for ( var i = 0; i < tags.length; i++)
    {
        tags[i].style.color=colorFont[colorKey];
        tags[i].style.backgroundColor=colorBack[colorKey];
    }
}

Answer 1

您应该使用弹出窗口和内容脚本可用的持久存储。

Chrome以chrome.storage API。

的形式提供

Google Options pages上的文档提供了一个很好的例子。

请注意chrome.storage是异步的。不要做common mistakes。

chrome扩展程序是否可以保存您在扩展程序上设置的操作？

1 个答案: