Chrome 扩展程序 - 无法获取输入值答案

【问题标题】：Chrome Extension - Cant get input valueChrome 扩展程序 - 无法获取输入值
【发布时间】：2018-03-30 18:14:23
【问题描述】：

我正在尝试获取输入值并将其转换为 var 以更改网页值。我不知道这是否是正确的方法，但据我所知：/我有点需要制作自动填充器，它从我的扩展输入中填充页面。当它直接搜索我的 input.value 时，我尝试这样做，但它总是显示它的 null，我还尝试将我的输入保存在 localStorage 中......但它不起作用:(当我尝试这样做时，我会发布所有内容当我将输入保存在 localStorage 中时。对不起，如果这是一个愚蠢的问题，但我无法让它工作:(

清单文件：

{
"manifest_version" : 2,
"name": "sAVING iNPUT",
"version": "1.0",
"description" : "Click something pls",
"version" : "1.0",
"permissions" : ["<all_urls>"],

"browser_action" : {
  "default_popup" : "popup.html"

}
}

Popup.html 文件：

<!DOCTYPE html>
<html>
<head><title> activity</title></head>
<body>
<div>
    <div>
        E-Pasts
        <input type="text" name="epasts" id="epasts"></input>
    </div>
    <button id="ielogoties" aonClick="saveInput()" > login </button>
</div>
    <script src="popup.js">
    function saveInput(){
        localStorage.setItem("epastss", document.getElementById("epasts"));
    }
    </script>
</body>
</html>

Popup.js 文件：

 function injectTheScript() {
chrome.tabs.query({active : true, currentWindow:true},function(tabs){
    chrome.tabs.executeScript(tabs[0].id,{file: "content_script.js"});
});

}
document.getElementById("ielogoties").addEventListener
("click",injectTheScript);

content_script.js 文件：

var drepasts = document.getElementById("email");
var epasts = localStorage.getItem("epastss")


drepasts.value= epasts;
alert("hehejr");
localStorage.removeItem("epasts");

现在按下按钮时出现此错误：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“script-src 'self' blob: filesystem: chrome-extension-resource:”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-...”）或随机数（“nonce-...”）。

【问题讨论】：

在这里查看解决方案stackoverflow.com/questions/52455598/…

标签： javascript html input local-storage add-on

【解决方案1】：

您需要在清单文件中声明storage 权限才能访问localStorage。

您的permissions 部分应如下所示：

"permissions" : ["<all_urls>", "storage"],

或者：

"permissions": [
    "<all_urls>",
    "storage"
],

请参阅chrome.storage documentation 了解更多信息。

另外，我猜这只是您帖子中的一个错字，但aonClick 应该是onclick：

<button id="ielogoties" aonClick="saveInput()" > login </button>

您的代码现在的方式是获取<input> 元素本身并将其保存在localStorage 中，然后检索该值并尝试将其插入到id 为“email”的元素中。这可能就是您收到null 的原因。

要获取输入值而不是输入元素，请将您的 setItem 语句更改为：

localStorage.setItem("epastss", document.getElementById("epasts").value);

【讨论】：

这是一个愚蠢的错误，但它仍然显示为 null :(
@TheProfesor 您是否要保存输入元素或其值？如果要保存其值，则需要将setItem 值更改为document.getElementById("epasts").value。