如何在 chrome 扩展中访问新选项卡的弹出窗口的内容答案

【问题标题】：How to access contents of pop up window of a new tab in chrome extension如何在 chrome 扩展中访问新选项卡的弹出窗口的内容
【发布时间】：2013-11-29 09:12:28
【问题描述】：

我已经开发了一个网站并设置为 google chrome 扩展程序。我需要的是，当我安装我的扩展程序时，应该在一个新窗口上打开一个弹出窗口，询问用户名和密码，并且必须将此用户名存储在应该可以在 chrome 扩展中访问的本地存储。我该怎么做，请帮助我。这是我的 manifest.json

   {
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
    "default_icon": "icon_128.png"
},
"background": {
    "persistent": false,
    "scripts": ["background.js"]
},

"browser_action": {
    "default_title": "Calpine Extension",
    "default_icon": "calpine_not_logged_in.png" 

},
"permissions": [

   "*://blog.calpinetech.com/test/index.php",
    "alarms",
    "notifications"
 ],
  "web_accessible_resources": [
  "/icon_128.png"]

 }

这是我在 background.js 中弹出的代码

chrome.windows.create({url : "test.html"});

这是我在 chrome.runtime.onInstalled.addListener() 里面写的。

这是我的 test.html

<html>
<head>
    <script type="text/javascript">
        function log(){
            var uname=document.getElementById('name');
            alert(uname);
            //window.localStorage.setItem('uname', $("input[type='username']").val());
            //alert(localStorage.uname);
        }
    </script>
</head>
 <body>
<form name="userinfo" id="userinfo">
      username : 
      <input id="name" type="text" name="username"/><br><br>
      password :
      <input type="password" name="password"/><br><br>
       <input type="button" value="Log In" onClick="log()"/>
     </form>
  </body>
 </html>

现在我需要的是，当用户启用我的扩展程序时，必须在新窗口中打开一个弹出窗口，询问用户名和密码。当他输入用户名和密码时，用户名必须存储在本地存储中，可以从chrome 扩展。我该怎么做？请帮帮我。

【问题讨论】：

标签： javascript html google-chrome-extension popupwindow

【解决方案1】：

在您作为脚本添加的任何 js 文件中使用它。

//open new tab for installation after extension is added to chrome 
chrome.runtime.onInstalled.addListener(function (install) {
//code for installation
chrome.windows.create({ 'url': chrome.extension.getURL('test.html') }, function (tab) {
    //write the code to do something when tab is created on install()
});
});

在js代码中，在点击登录按钮时编写绑定事件。

用于设置localstorage，可以使用。

window.localStorage.setItem('uname', $("input[type='username']").val());
window.localStorage.setItem('passwrod', $("input[type='password']").val());

为了得到它们，

window.localStorage.getItem('uname');
window.localStorage.getItem('passwrod');

【讨论】：

感谢您的回复。我会检查一下
嗨，但我需要在新窗口中创建弹出窗口。而不是新标签
这不起作用。当我试图提醒它时，甚至 localStorage.uname 都没有显示。
好的。我会更新我的代码。没有错误。但是警报（uname）不起作用
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource:”。这是显示的错误