Сохранить выбранное фоновое изображение в localalstorage и показать это автоматически при обновлении сайта - PullRequest
Новая
       0

Сохранить выбранное фоновое изображение в localalstorage и показать это автоматически при обновлении сайта

0 голосов
/ 06 октября 2018

Я создал файл 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 будет просто другое изображение.

Все работаетотлично, но когда вы обновляете страницу, к которой эта страница применяет фоновое изображение, фоновое изображение исчезает и снова становится белым по умолчанию.Есть ли способ как-то сохранить выбранное изображение в localalstorage и автоматически применить его, когда пользователь обновляет страницу?

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 08 октября 2018

Создайте один 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+";";
});

Hopeэто помогает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...