Question

我做了一个options.html，基本上是我的弹出窗口

，当您单击＃clickme1时，它会在/popup/1.js触发一个事件

function hello() {
  chrome.tabs.executeScript({
    file: '/alert/1.js'
  });
}

document.getElementById('clickme1').addEventListener('click', hello);


and my / alert / 1. js looks like this:

  alert("Background set!");

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(https://www.toptal.com/designers/subtlepatterns/patterns/curls.png)';

body {
  background: #232526;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #414345, #232526);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #414345, #232526);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  width: 410px;
}

p {
  color: white;
  text-shadow: 2px 2px #000;
  text-align: center;
}

.myDiv {
  color: red;
  font-weight: bold;
  text-shadow: 2px 2px #000;
  text-align: center;
}

h2 {
  color: gray;
  text-shadow: 2px 2px #000;
  text-align: center;
}

a {
  color: yellow;
  text-align: center;
}

button {
  color: white;
}

#clickme1 {
  background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/curls.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
  margin-right: 100%;
  padding: 0;
  height: 134px;
  margin: 0;
  vertical-align: top;
  width: 134px;
}

#clickme2 {
  background-image: url(https://66.media.tumblr.com/3cca60810de972cc08c4a5ac40b690df/tumblr_inline_nk1lmq0ZgB1s9yrmw.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
  margin-right: 100%;
  height: 134px;
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 134px;
}

#clickme3 {
  background-image: url(https://78.media.tumblr.com/04ff549b92bb99db8ad725a83e288030/tumblr_inline_n258pty5wY1qhwjx8.gif);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
  margin-right: 100%;
  height: 134px;
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 134px;
}

#clickme4 {
  background-image: url(http://brainlava.com/admin/assets/SP2013BGPattern.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
  margin-right: 100%;
  height: 134px;
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 134px;
}

#clickme5 {
  background-image: url(https://background-tiles.com/overview/black/textures/large/5013.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
  margin-right: 100%;
  height: 134px;
  padding: 0;
  margin: 0;
  vertical-align: top;
  width: 134px;
}

<!DOCTYPE html>
<!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
<html>

<head>
  <title>Dark Theme Options</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <body>
    <p>This extension will simply change how CryptoKitties look</p>
    <p>It won't do anything with your account</p>
    <div style="display: flex; justify-content: center;">
      <img src="/icons/moon128.png" style="width: 128px; height: 128px;" />
    </div>
    <h2>Privacy Policy</h2>
    <p>This extension does not store/save/transmit any data in/out of your computer. It only changes how CryptoKitties is looking</p>
    <p><a href="https://kittyscripts.weebly.com">https://kittyscripts.weebly.com</a></p>
    <p>czukorhaver@gmail.com</p>
    <div class="myDiv">
      <p2>Open <a href="http://cryptokitties.co" target="_blank">this page</a> and then click the background down below that you want to set<br><br></p2>
    </div>
    <!--First background-->
    <button id="clickme1"></button>
    <script type="text/javascript" src="/popup/1.js"></script>
    <!--Second background-->
    <button id="clickme2"></button>
    <script type="text/javascript" src="/popup/2.js"></script>
    <!--Third background-->
    <button id="clickme3"></button>

    <script type="text/javascript" src="/popup/3.js"></script>
    <!--Fourth background-->
    <button id="clickme4"></button>

    <script type="text/javascript" src="/popup/4.js"></script>
    <!--Fifth background-->
    <button id="clickme5"></button>

    <script type="text/javascript" src="/popup/5.js"></script>
  </body>

</html>

如果您单击clickme2会执行相同的操作，则alert.js中只会有一个不同的图像。

一切正常，但是当您刷新页面时，此页面将背景图像应用到该页面，背景图像消失，其默认白色再次消失。有什么方法可以将选择的图像保存到本地存储，并在用户刷新页面时自动应用该图像？

谢谢您的帮助！

Answer 1

为我们的弹出窗口制作一个js文件，仅保存背景选择。在您的popup.js中执行以下操作：

//Get the desired background, let's just say you have prefixed options
document.getElementById('background1').addEventListener('click', function (event) {

chrome.storage.local.set({background:"background1.png"});
}

然后制作一个可在所需网站的每个页面上运行的javascript文件，例如（https://www.google.com/ *）

chrome.storage.local.get([background], function (result) {
document.body.style = "background: URL(chrome-extension://"+chrome.runtime.id+"/"+background+";";
});

希望有帮助。

将所选背景图片保存到本地存储，并在刷新网站时自动显示

1 个答案: