【问题标题】:Chrome Extension Simple Popup Won't Remain In Last StateChrome 扩展简单弹出窗口不会保持在上次状态
【发布时间】:2012-02-01 02:06:06
【问题描述】:

现在我相信你们中的一些人已经听说了发生在Byron Nuclear Plant(我恰好住在附近)的事件,以及美国和加拿大发生的大量地震。 (顺便说一句:我找到了this 扩展程序,您可以在其中监测世界各地的地震)

无论如何,我想更好地观察核电站,而且我已经知道 Radiation Network 所以我做了一个名为 Radiation Map 的 chrome 扩展,它由 Radiation Network 提供支持(虽然我绝不隶属于辐射网络)

我不仅自己做到了,而且每个人都可以监测美国、日本、南美和欧洲的辐射水平。 (我知道我没有做太多工作,但你明白原因)

但是我有 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);
    });

});

【问题讨论】:

    标签: google-chrome google-chrome-extension popup


    【解决方案1】:

    每次弹出窗口打开时都会重新加载页面,这意味着该状态不会自动保持。您可以使用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();
    });
    

    【讨论】:

    • 用户打开扩展程序,点击阿拉斯加,关闭扩展程序,重新打开它,我希望它保留用户离开它的方式。很抱歉造成混乱,但这如何解决问题?
    • @mikethedj4:我可能应该更明确一点——你所要求的不会自动发生。每次弹出窗口打开时都会重新加载页面。因此,您必须以尊重用户先前选择的方式初始化页面。这就是我的代码示例。
    • 只是为了澄清一下这个答案。当您打开和关闭扩展时,使用 localStorage 会保留扩展的状态,而 sessionStorage 则不会。我猜打开和关闭扩展程序会在新窗口/选项卡中重新打开弹出窗口,以便清除 sessionStorage。
    • 可以通过消息在后台脚本中保存状态吗?
    • @Sukima:你可以,特别是如果你的目标是保存持久状态(通过chrome.storage API)。鉴于问题仅与当前会话的状态有关,sessionStorage 似乎更合适 - 不需要异步逻辑,因此这种方法更简单。
    猜你喜欢
    • 2016-11-13
    • 1970-01-01
    • 2011-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-27
    • 1970-01-01
    • 2012-06-04
    相关资源
    最近更新 更多