Chrome扩展程序后台功能

时间:2019-02-03 14:30:05

标签: javascript google-chrome background popup

我正在尝试定义一个后台函数,并在popup.js中使用它。因为,我想发送POST请求,但不知道在popup.js中执行该请求的方法。我已经搜索过了,所以很多人只是说,最好在background.js中发送POST请求。 chrome阻止了来自popup.js的请求。

这是我的manifest.json:

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": [
        "declarativeContent",
        "activeTab",
        "tabs",
        "storage",
        "webNavigation",
        "<all_urls>"
    ],
    "background_page": "background.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon-16.png",
        "48": "icon-48.png",
        "128": "icon-128.png"
      }
    },
    "icons": {
        "16": "icon-16.png",
        "48": "icon-48.png",
        "128": "icon-128.png"
      },
    "manifest_version": 2
  }

我该怎么办?

1 个答案:

答案 0 :(得分:0)

看一下我的代码,我构建了一个密码管理器扩展,它与服务器交互并获取密码以填写表格,它的工作原理很吸引人。以下是此应用的清单。

 {
      "name": "Password Manager",
      "version": "0.3",
      "description": "Manage all Passwords",
      "options_page": "options.html",
      "permissions": [
        "contentSettings",
        "tabs",
        "activeTab",
        "http://*/",
        "storage",
        "webRequest",
        "webRequestBlocking",
        "debugger",
        "<all_urls>",
        {"fileSystem": ["write", "retainEntries", "directory"]}
      ],
      "browser_action": {
        "default_icon": "images/icon.png",
        "default_popup": "app.html"
      },
      "manifest_version": 2,
      "content_scripts": [
      {
          "matches": [
              "*://*/*"
          ],
          "js": [
            "scripts/jquery.js"
        ]

        }],
        "background": {
          "scripts": [    
            "scripts/jquery.js",
            "scripts/custom.js"       
          ],
          "persistent": true
        }

    }

如果您在下面查看app.html代码,我可以在popup.js中执行代码

<!DOCTYPE html>
<html>
<head>
    <title>Popup</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/style.min.css" rel="stylesheet" />

    <style>
      body {
          margin: 20p;
          padding: 20px;
          width: 300px;
          min-height: 150px;
      }

      .header{
        width: 100%;
        position: absolute;
        top: 20px;
      }
    </style>
</head>
  <body>
      <br/>
      <div class='header'>
        User: <label id="username" ></label>
        <br/><button class='btn btn-xs btn-warning options_helper' >Settings</button>
     </div>
     <br/><hr/>

      <div id="jstree_demo_div">

      </div>

  </body> 
  <script src="scripts/jquery.js"></script>
  <script src="scripts/bootstrap.js"></script>
  <script src="scripts/jstree.min.js"></script>
  <script src="scripts/popup.js"></script>
  <script src="scripts/components/core.js"></script>
  <script src="scripts/components/lib-typedarrays.js"></script>
  <script src="scripts/components/x64-core.js"></script>
  <script src="scripts/components/enc-utf16.js"></script>
  <script src="scripts/components/enc-base64.js"></script>
  <script src="scripts/components/md5.js"></script>
  <script src="scripts/components/sha1.js"></script>
  <script src="scripts/components/sha256.js"></script>
  <script src="scripts/components/sha224.js"></script>
  <script src="scripts/components/sha512.js"></script>
  <script src="scripts/components/sha384.js"></script>
  <script src="scripts/components/ripemd160.js"></script>
  <script src="scripts/components/hmac.js"></script>
  <script src="scripts/components/pbkdf2.js"></script>
  <script src="scripts/components/evpkdf.js"></script>
  <script src="scripts/components/cipher-core.js"></script>
  <script src="scripts/components/mode-cfb.js"></script>
  <script src="scripts/components/mode-ctr.js"></script>
  <script src="scripts/components/mode-ofb.js"></script>
  <script src="scripts/components/mode-ecb.js"></script>
  <script src="scripts/components/pad-ansix923.js"></script>
  <script src="scripts/components/pad-iso10126.js"></script>
  <script src="scripts/components/pad-zeropadding.js"></script>
  <script src="scripts/components/pad-iso97971.js"></script>
  <script src="scripts/components/pad-nopadding.js"></script>
  <script src="scripts/components/rc4.js"></script>
  <script src="scripts/components/rabbit.js"></script>
  <script src="scripts/components/aes.js"></script>
  <script src="scripts/components/tripledes.js"></script>
  <script src="scripts/crypt.js" type="text/javascript"></script>

  </html>

最后一部分,如您所见,您将看到我正在popup.js中使用ajax来检索密码文件,以将其从服务器保存到本地。

// document.addEventListener("contextmenu", function(e) {
//   e.preventDefault();
//   });

var key = localStorage.getItem("access_key");
$(document).ready(function(){

  readTextFile("file://"+localStorage.getItem("db_path"));
  var menuItems="";
  var key = '';

});

$('#jstree_demo_div').on("select_node.jstree", function (e, data) { 

  chrome.tabs.query({ currentWindow: true, active: true },function (tabArray) {
          chrome.tabs.executeScript(tabArray[0].id, {
              file: 'scripts/pop.js'
           }, function() {
            chrome.tabs.sendMessage(tabArray[0].id,{type: data.node.data.jstree.type, options: { 
                  user: data.node.data.jstree.user,
                  pass: data.node.data.jstree.pass
                }
              })
          })
      }
  );

});

$(".options_helper").click(function(){
  chrome.tabs.create({  url: "options.html"  });
})

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
              var fullresponse = decrypt(rawFile.responseText,key);
              var username = fullresponse.split("|")[1];
              var userdata = fullresponse.split("|")[0];
              $("#username").text(username);
              if (decrypt(rawFile.responseText,key).length>0){
                $('#jstree_demo_div').html(userdata);
                $('#jstree_demo_div').jstree();
              }else{
                $('#jstree_demo_div').html("Password Database is not found");
              }
            }else{
              $('#jstree_demo_div').html("Password Database is not found");
            }
        }else{

        }
    }
    rawFile.send(null);
}

希望我可以帮助您编写整个程序。如果您有任何疑问。让我知道。