Chrome擴展簡單彈出不會保留在最後狀態

現在我確定你們中的一些人已經聽說了發生在Byron Nuclear Plant（我碰巧住在附近）的事件以及大量的地震正在發生美國和加拿大。（BTW：我發現this擴展，你可以監控地震在世界各地）Chrome擴展簡單彈出不會保留在最後狀態

反正有去所有這些問題上，我想看熱鬧的核設施更好，我已經知道了Radiation Network所以我做了一個鍍鉻擴展名爲Radiation Map這是由輻射網絡供電（雖然我絕不隸屬於輻射網絡）

我這樣做不僅僅是我自己，但每個人都可以監測輻射水平在美國，日本，南美洲和歐洲。（我知道我沒有做太多的工作，但你看到原因）

但是我有1個問題，我找不出來。當我打開彈出窗口，並且正在查看日本的輻射水平時，當我關閉彈出窗口時，它會重新顯示美國的輻射水平。我該怎麼做才能讓它留在用戶離開它的地方，在我的例子中就是這個例子中的日本？（我試過的內容腳本，但CSS和jQuery沒有加載）

清單

{ 
    "name": "Radiation Map", 
    "version": "1.0.1", 
    "description": "See what radiation levels are anywhere in the United States, South America, Japan, and Europe! Updated in real time every minute.", 

    "browser_action": { 
     "default_icon": "images/logo.png", 
     "default_title": "Radiation Map", 
     "popup": "index.html" 
    }, 

    "icons": { 
     "48": "images/48x48.png", 
     "128": "images/128x128.png", 
     "256": "images/logo.png" 
    } 
}

彈出

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/rmd.js"></script> 
</head> 
<body id="radiationmap"> 
    <div id="rmlbbg"></div> 

    <div id="topnavradiation"> 
     <ul id="menu"> 
      <div id="themedrop"> 
       <table> 
        <tr><td> 
         <button id="cus">Contiguous United States</button> 
        </tr></td> 
        <tr><td> 
         <button id="hawaii">Hawaii</button> 
        </tr></td> 
        <tr><td> 
         <button id="alaska">Alaska</button> 
        </tr></td> 
        <tr><td> 
         <button id="sa">South America</button> 
        </tr></td> 
        <tr><td> 
         <button id="japan">Japan</button> 
        </tr></td> 
        <tr><td> 
         <button id="europe">Europe</button> 
        </tr></td> 
       </table> 
      </div> 
      <li><button id="about">About</button></li> 
      <li><button id="home">Home</button></li> 
      <li><button id="location">Location</button></li> 
     </ul> 
    </div> 

    <div id="radiationmap"> 
     <div id="cusmap"> 
      <img src="http://www.radiationnetwork.com/GGFTPMap.jpg" width="752" height="478"> 
     </div> 
     <div id="alaskamap"> 
      <img src="http://www.radiationnetwork.com/Alaska.JPG" width="752" height="478"> 
     </div> 
     <div id="hawaiimap"> 
      <img src="http://www.radiationnetwork.com/Hawaii.JPG" width="752" height="478"> 
     </div> 
     <div id="samap"> 
      <img src="http://www.radiationnetwork.com/Paraguay.JPG" width="752" height="478"> 
     </div> 
     <div id="japanmap"> 
      <img src="http://www.radiationnetwork.com/Japan.JPG" width="752" height="478"> 
     </div> 
     <div id="europemap"> 
      <img src="http://www.radiationnetwork.com/Europe.JPG" width="752" height="478"> 
     </div> 

     <table width="752"> 
      <td><img src="images/LegendWeb.bmp"></td> 
      <td><img src="images/Nuclear.bmp"> Nuclear Site</td> 
      <td>Alert Level = 100 CPM</td> 
     </table> 
    </div> 

    <div id="aboutradiationmap"> 
     Radiation Map is powered by the <a href="http://radiationnetwork.com/" target="_blank">Radiation Network</a>, and without them this extension couldn't be possible. 

     <p><a href="http://www.youtube.com/mikethedj4" target="_blank">Michael</a> created this extension for obvious reasons, and is in no way affiliated with the Radiation Network.</p> 
     <hr> 
     <center>Take control over your life, and stay safe!<br /> 
     <em>Much Love!</em> 

     <p><a href="http://swagbucks.com/refer/mikethedj4" target="_blank"><img src="images/swagbucks.jpg"></a></p> 

     </center> 
    </div> 
</body> 
</html>

RMD.JS（效果隱藏，並顯示監測輻射水平的其他地圖）

$(document).ready(function() { 
    $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap, div#themedrop, div#aboutradiationmap, div#rmlbbg').hide(); 

    $('button#home').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeOut(400); 
     $('div#themedrop').slideUp(400); 
    }); 

    $('button#about').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeToggle(400); 
     $('div#themedrop').slideUp(400); 
    }); 

    $('button#location').click(function() { 
     $('div#themedrop').slideToggle(400); 
    }); 

    $('button#cus').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#cusmap').delay(400).slideDown(400); 
    }); 

    $('button#europe').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#cusmap').slideUp(400); 
     $('div#europemap').delay(400).slideDown(400); 
    }); 

    $('button#japan').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#cusmap, div#europemap').slideUp(400); 
     $('div#japanmap').delay(400).slideDown(400); 
    }); 

    $('button#sa').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#cusmap, div#japanmap, div#europemap').slideUp(400); 
     $('div#samap').delay(400).slideDown(400); 
    }); 

    $('button#alaska').click(function() { 
     $('div#cusmap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#alaskamap').delay(400).slideDown(400); 
    }); 

    $('button#hawaii').click(function() { 
     $('div#alaskamap, div#cusmap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#hawaiimap').delay(400).slideDown(400); 
    }); 

    $('div#rmlbbg').click(function() { 
     $('div#rmlbbg, div#aboutradiationmap').fadeOut(400); 
    }); 

});

來源

2012-02-01 Michael Schwartz

每次彈出窗口打開時頁面都會重新加載，這意味着狀態不會自動保留。您可以使用sessionStorage來記住當前會話的設置（如果您希望它在瀏覽器重新啓動後仍然存在，甚至可以使用localStorage）。類似這樣的：

$(document).ready(function() { 

    ... 

    $('button#cus').click(function() { 
     $('div#alaskamap, div#hawaiimap, div#samap, div#japanmap, div#europemap').slideUp(400); 
     $('div#cusmap').delay(400).slideDown(400); 
     sessionStorage.selectedMap = "cus"; 
    }); 

    ... 

    // "Click" the button corresponding to the map previously selected 
    var selectedMap = sessionStorage.selectedMap || "cus"; 
    $('button#' + selectedMap).click(); 
});

來源

2012-02-01 08:19:08

用戶打開擴展程序，點擊阿拉斯加，關閉擴展程序，打開它，我希望它留在用戶如何離開它。對不起，這個問題怎麼解決？ – 2012-02-01 09:38:36

@ mikethedj4：我應該更清楚 - 你要求的東西不會自動發生。每當彈出窗口打開時，頁面都會重新加載。所以你必須以用戶以前的選擇得到尊重的方式初始化頁面。這就是我的代碼的例證。 – 2012-02-01 12:19:19

只是爲了澄清這個答案。當sessionStorage不打開和關閉擴展時，使用localStorage保留擴展的狀態。我猜想打開和關閉擴展程序會在新窗口/選項卡中重新打開彈出窗口，因此會清除sessionStorage。 – 2016-09-19 11:02:09

Chrome擴展簡單彈出不會保留在最後狀態

回答

相關問題