当前位置： 文江博客话题详情

Chrome 扩展简单弹出窗口不会保留在最后状态

发布于 2025-01-02 01:41:41 字数 7314 浏览 5 评论 0原文

现在我确信你们中的一些人已经听说过发生在 拜伦核电站（我碰巧住在附近）以及一个巨大的美国和加拿大发生的地震数量。 （顺便说一句：我找到了这个扩展程序，您可以在其中监控地震世界各地）

无论如何，随着所有这些问题的发生，我想更好地观察核电站，而且我已经了解辐射网络 所以我制作了一个名为 辐射地图，由辐射网络提供支持（尽管我与辐射网络没有任何关系），

所以不仅仅是我自己制作的，但每个人都可以监测美国、日本、南美和欧洲的辐射水平。 （我知道我没有做太多工作，但你知道原因）

但是我有 1 个我无法解决的问题。当我打开弹出窗口时，我正在查看日本的辐射水平，当我关闭弹出窗口时，它会返回显示美国的辐射水平。我该如何让它留在用户离开的地方，比如我的例子中的日本？ （我尝试了内容脚本，但是 css 和 jquery 没有加载）

Manifest

{
    "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"
    }
}

Popup

<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);
    });

});
原文

Now I'm sure some of you have heard of the incident that happened at Byron Nuclear Plant (Which I happen to live near) As well as a massive amount of earthquakes going on in the United States, and Canada. (BTW: I found this extension where you can monitor earthquakes all over the world)

Anyway with all these issues going on I wanted to watch the Nuclear plants better, and I already knew about the Radiation Network So I made a chrome extension called Radiation Map which is powered by the Radiation Network (Although I'm in no way affiliated with Radiation Network)

I made it so not just myself, but everyone can monitor Radiation Levels in the US, Japan, South America, and Europe. (I know I didn't do much work, but you see the reason)

However I have 1 problem that I can't figure out. When I have the popup open, and I'm viewing Japan's radiation levels, and when I close the popup it does back to showing the United States radiation levels. How do I make it so it stay's at where the user leaves it at, say in my case Japan in this example? (I tried content scripts, but the css, and jquery didn't load)

Manifest

{
    "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"
    }
}

Popup

<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 (effects to hide, and show other maps that monitor radiation levels)

$(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);
    });

});

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

↙厌世 2025-01-09 01:41:41

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

The page is reloaded every time the pop-up opens, meaning that state won't persist automatically. You can use sessionStorage to remember the setting for the current session (or even localStorage if you want it to survive a browser restart). Something like this:

$(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();
});
回复 原文
~没有更多了~

关于作者

我的影子我的梦

暂无简介

文章
评论
30 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文