你好，我想做的是发送一个从我的 background.js 文件派生的字符串，并将其发送到我的 React 应用程序（特别是 App.js 使用的组件）。我在 component.js 文件的顶部有 /* global chrome */ 并且能够将数据存储在 chrome 本地存储上但是我的问题是如何确保我可以在 React 应用程序之前将这些数据存储在变量中处理了吗？例如，即使我能够在组件内部为 chrome 存储中的数据分配一个变量，它也只会在我的 React 应用程序创建后存储。我现在正在尝试的是在 background.js 中发送一条 chrome 消息，并尝试在组件中侦听此消息以存储变量，但侦听器似乎无法正常工作。任何帮助，将不胜感激！（附言组件.js：chrome.runtime.onMessage.addListener(function(msg) { if(msg.type == "USER_STORED") { chrome.storage.local.get(['name'], function(result) { console.log("User is " + result.name); username = result.name; }); }});背景.js：chrome.storage.local.set({name: username}, function() { console.log("User is set to " + username); chrome.runtime.sendMessage({type: "USER_STORED" }); console.log("message sent"); }); // Open extension window console.log("WINDOW_OPENED"); var win = window.open("index.html", "extension_popup");
2 回答
蝴蝶刀刀
TA贡献1801条经验 获得超8个赞
你使用错误的方法。您根本不需要从后台发送此类消息，也不需要在弹出窗口中收听它们。只需将chrome.storage.local.getcall 添加到您的弹出入口点（可能）并用其回调index.js包装。ReactDOM.render是这样的：
chrome.storage.local.get(null, function (data) {
ReactDOM.render(
<App {...data} />,
document.getElementById('root')
)
});
然后，来自的数据将通过 propschrome.storage在根的所有子组件中可用。<App>是这样的：
function YourComponent(props) {
console.log("User is " + props.name);
return <h1>Hello, {props.name}</h1>;
}
哈士奇WWW
TA贡献1799条经验 获得超6个赞
我认为您可以直接访问 componentDidMount() 方法中的 chrome 存储 API，并从 storage.get() 获取变量并将值设置为状态变量。
尝试这个
清单.json
{
"name": "test2",
"version": "0.0.1",
"manifest_version": 2,
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"background": {
"scripts": [
"./background/background.bundle.js"
]
},
"permissions": [
"storage",
"tabs",
"activeTab"
],
"browser_action": {}
}
背景.js
console.log("inside bg script")
let user = "zzzzzzzzz"
chrome.storage.local.set({ name: user }, function () {
console.log("User is set to" + user);
})
chrome.browserAction.onClicked.addListener((tab) => {
chrome.tabs.create({
url: chrome.runtime.getURL("./test.html")
});
});
测试.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app-root">
</div>
<script src="./index.bundle.js"></script>
</body>
</html>
index.js（反应组件）
import React from "react";
import ReactDOM from "react-dom";
class MainApp extends React.Component {
render() {
return (
<div>
<h1>hi</h1>
</div>
);
}
componentDidMount() {
let newThis = this;
chrome.storage.local.get(['name'], function (result) {
console.log("User is " + result.name);
// you can use the variable or set to any state variable from here
});
}
}
ReactDOM.render(<MainApp />, document.getElementById("app-root"))
所需的值将在 componentDidMount() 函数 storage.get() 方法回调中可用。您可以设置组件状态变量或根据需要使用它。
添加回答
举报
0/150
提交
取消