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

How to access contents of pop up window of a new tab in chrome extension

本文关键字：窗口 选项 chrome 扩展 新选项 访问      更新时间：2023-12-17

我开发了一个网站，并将其设置为谷歌chrome扩展。我需要的是，当我安装我的扩展时，应该在一个新窗口上打开一个弹出窗口，询问用户名和密码，并且必须将这个用户名存储在本地存储中，该存储应该可以在chrome扩展中访问。我该怎么做？请帮帮我。这是我的宣言.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"]
 }

这是我在后台.js 弹出的代码

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

这是我在chrome.runtime.oInstalled.addListener（）.中写的

这是我的测试.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扩展访问的本地存储中。我该怎么做？请帮帮我。

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

//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代码中，单击登录按钮即可编写绑定事件。

用于设置本地存储，可以使用。

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

为了得到它们，

window.localStorage.getItem('uname');
window.localStorage.getItem('passwrod');
相关文章：