Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/macos/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用HTML5';Google Chrome扩展中的本地存储?_Javascript_Html_Google Chrome_Google Chrome Extension_Local Storage - Fatal编程技术网

Javascript 如何使用HTML5';Google Chrome扩展中的本地存储?

Javascript 如何使用HTML5';Google Chrome扩展中的本地存储?,javascript,html,google-chrome,google-chrome-extension,local-storage,Javascript,Html,Google Chrome,Google Chrome Extension,Local Storage,我正试图开发一个扩展,将与可怕的新标签页工作。我已经按照作者的建议写了这封信,但我添加到背景页面的任何脚本似乎都没有被执行。这是我的背景页: <script> var info = { poke: 1, width: 1, height: 1, path: "widget.html" } chrome.extension.onRequestExternal.addListener(functio

我正试图开发一个扩展,将与可怕的新标签页工作。我已经按照作者的建议写了这封信,但我添加到背景页面的任何脚本似乎都没有被执行。这是我的背景页:

<script>
    var info = {
        poke: 1,
        width: 1,
        height: 1,
        path: "widget.html"
    }

    chrome.extension.onRequestExternal.addListener(function(request, sender, sendResponse) {
        if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") {
            chrome.extension.sendRequest(
                sender.id,
                {
                    head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback",
                    body: info,
                }
            );
        }
    });

    function initSelectedTab() {
        localStorage.setItem("selectedTab", "Something");
    }

    initSelectedTab();
</script>
以下是widget.html的相关部分:

<script>
    var selectedTab = localStorage.getItem("selectedTab");

    document.write(selectedTab);
</script>
<script>
    (function () {
        "use strict";

        var foo = localStorage.getItem("foo");

        document.write(foo);
    }());
</script>

var selectedTab=localStorage.getItem(“selectedTab”);
文件。写入(选择选项卡);

每次,浏览器都只显示null。根本没有设置本地存储,这让我觉得后台页面完全断开了连接。是否有错误连接的内容?

如果我理解正确,背景页将尝试在localStorage中存储内容,然后将widget.html传递给任何请求内容脚本/应用程序/扩展,然后该脚本/应用程序/扩展将读取localStorage中存储的信息

如果您正试图这样做,那么问题可能是这样的-后台页面和内容脚本/其他应用程序/扩展无法直接访问彼此的本地存储(widget.html在请求脚本/页面的沙箱中运行时就是这样做的)。您需要使用消息传递在后台页面和发送消息的脚本之间传递信息


如果您只想检查后台页面是否有响应,请在该页面中执行console.log('something'),然后在后台页面的开发人员工具窗口中检查控制台上是否打印了'something'。

显然,几个月前我出于挫折放弃了这个项目。今天我终于决定重温一下,我发现:

  • localStorage对象是缓存的(见图),这解释了为什么扩展有时会工作,而在我对代码进行了破坏性更改后很长时间,扩展突然就不工作了。这也解释了为什么在我修复了它之后,这个扩展将无法继续工作很长时间。为了便于将来参考,从Chrome的扩展管理器重新加载扩展将清除扩展的本地存储缓存
  • Chrome扩展的背景页面(至少在ANTP扩展的情况下)必须是HTML文件。如果是JS文件,它将无法工作
  • 我过去在JavaScript方面非常糟糕
  • 下面是更新后的代码,您可以将其用作自己的Chrome或ANTP扩展的shell。我还包括了ANTP使用poke v2所需的更改

    background.html:

    <html>
        <body>
            <script>
                (function () {
                    "use strict";
    
                    var info = {
                        poke: 2,
                        width: 1,
                        height: 1,
                        path: "widget.html",
                        v2: {
                            resize: false,
                            min_width: 1,
                            max_width: 1,
                            min_height: 1,
                            max_height: 1
                        }
                    };
    
                    chrome.extension.onRequestExternal.addListener(function (request, sender, sendResponse) {
                        if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") {
                            chrome.extension.sendRequest(
                                sender.id,
                                {
                                    head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback",
                                    body: info
                                }
                            );
                        }
                    });
    
                    localStorage.setItem("foo", "bar");
                }());
            </script>
        </body>
    </html>
    
    
    (功能(){
    “严格使用”;
    变量信息={
    注:2,
    宽度:1,
    身高:1,,
    路径:“widget.html”,
    v2:{
    调整大小:false,
    最小宽度:1,
    最大宽度:1,
    最小高度:1,
    最大高度:1
    }
    };
    chrome.extension.onRequestExternal.addListener(函数(请求、发送方、sendResponse){
    如果(请求==“mgmiemnjjchgKmgbeljfocdjnpjnpjnmgg”){
    chrome.extension.sendRequest(
    发件人id,
    {
    标题:“mgmiemnjjchgKmgbeljfocdjnpjnmgcg pokeback”,
    正文:信息
    }
    );
    }
    });
    setItem(“foo”、“bar”);
    }());
    
    manifest.json完全相同。以下是widget.html的相关部分:

    <script>
        var selectedTab = localStorage.getItem("selectedTab");
    
        document.write(selectedTab);
    </script>
    
    <script>
        (function () {
            "use strict";
    
            var foo = localStorage.getItem("foo");
    
            document.write(foo);
        }());
    </script>
    
    
    (功能(){
    “严格使用”;
    var foo=localStorage.getItem(“foo”);
    文件编写(foo);
    }());
    
    即使我的背景页面中只有警报(“废话”),它也不会起任何作用。啊,这让我发疯了。谢谢,@Adi B。我会试试的。等等。console.log()在后台页中不执行任何操作。我试图在小部件页面中执行chrome.extension.getBackgroundPage().console.log('foo'),但它在控制台中给了我这个错误:不安全的JavaScript试图使用URL chrome访问框架-extension://mgmiemnjjchgkmgbeljfocdjjnpjnmcg/background.html 从带有URL浏览器的框架-extension://lhdhihamoggeikbfdhkfffkplmmbaado/widget.html. 域、协议和端口必须匹配。未捕获的TypeError:无法调用的方法“log”undefined@david您是在后台页面还是在小部件中调用console.log()?在背景页中调用它。另外,如果您看到后台页面的开发者工具窗口的链接,那么后台页面正在加载。页面上的任何错误都可以在开发人员的工具控制台上看到。