时间戳

首页 > 解决方案 > 每个域的后台共享存储和 chrome 扩展中的弹出窗口

javascript - 每个域的后台共享存储和 chrome 扩展中的弹出窗口

问题描述

我正在尝试为 Chrome 浏览器创建一个插件，在弹出窗口中我打印请求列表，这是由当前活动选项卡所在的页面创建的。

清单.json

{
    "manifest_version": 2,

    "name": "Pixel Detector",
    "description": "A pixel detector for tracking codes.",
    "version": "1.0",

    "background": {
        "scripts": ["assets/js/background.js"]
    },

    "icons": {
        "32": "assets/img/icon32.png"
    },

    "browser_action": {
        "default_icon": "assets/img/icon32.png",
        "default_popup": "index.html"
    },

    "permissions": [
        "webRequest",
        "webRequestBlocking",
        "activeTab",
        "<all_urls>"
    ]
}

背景.js

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if(details.url.toLowerCase().indexOf("pixel.domain.com") > 0){
            var pixels = new Array();
            if(sessionStorage.getItem('pixels')){
                pixels = JSON.parse(sessionStorage.getItem('pixels'));
            }
            pixels.push(details.url);
            sessionStorage.setItem('pixels', JSON.stringify(pixels));
        }

    },
    {urls: ["<all_urls>"]}
);

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pixel Detector</title>
    <link rel="stylesheet" href="assets/styles/styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>Pixel Detector</h1>
        </header>
        <div class="content">
            <ul class="list">
                <table class="pixelsTable">
                    <thead class="pixelsTable__head">
                        <th>Name</th>
                    </thead>
                    <tbody class="pixelsTable__body">

                    </tbody>
                </table>
            </ul>
        </div>
    </div>
    <script src="assets/js/main.js"></script>
</body>
</html>

我毫无问题地捕获了所有请求，但我不知道如何以最简单的方式将它们传递给 index.html 和 main.js。对我来说真正重要的是可以关闭扩展弹出窗口。Background.js 应该将其收集到某个数组并在打开后将其传递给弹出窗口。

我尝试过使用全局存储，工作正常，但我不想在所有选项卡之间共享它。它必须是每个域的本地存储。

一旦用户打开下一个网站，我不想存储任何东西。我也尝试过getBackgroundPage，但它由多个域和多个选项卡共享。我正在寻找更原始的东西。

标签： javascriptgoogle-chromegoogle-chrome-extensionwebrequest

解决方案

推荐阅读