个人中心
gpt4 book ai didi

javascript - 如何阅读在线资源并更新 Google Chrome 扩展程序中的弹出窗口

转载 作者：行者123 更新时间：2023-11-28 00:02:59 24 4
gpt4 key购买 nike

我正在尝试创建我的第一个 Google Chrome 扩展程序。

知道为什么这不是从 example.com 网站复制粘贴到我的弹出窗口吗？

popup.js:

document.addEventListener('DOMContentLoaded', function () {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", chrome.extension.getURL('http://example.com'), false);
  xhr.send();
  document.getElementById('response').innerHTML = xhr.responseText;
});

popup.html:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <p id="response"></p>
  </body>
</html>

manifest.json:

{
  "manifest_version": 2,
  "name": "Getting started",
  "description": "Display test from Example.com",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
  },
  "permissions": [
    "http://example.com"
  ]
}

顺便说一句，我不打算将捕获的内容直接注入(inject)到我的弹出窗口中! (脚本注入(inject)等)在这个阶段，我只是弄清楚一切是如何工作的。

最佳答案

有几个问题

  1. 您需要为您发出的任何 XMLHttp 请求请求权限，以便在您的扩展中明确标记。方法是在您的manifest.son中列出您要访问的网站。这非常简单，如下所示:https://developer.chrome.com/extensions/xhr

  2. 请求本身，当您发送它时，它不会立即得到答复。这是因为它通过互联网并在后台提出您的请求。所以你不能在调用 send 之后直接请求responseText - 因为它还不知道答案。您必须告诉它在完成加载后回调您的函数。这称为回调。

  3. 调试。您可以从 Google 安装一个工具，使“Inspect Element”在您的扩展上运行。这意味着您可以右键单击下拉列表并从上下文菜单中选择检查元素。然后您可以翻转到控制台选项卡并查看所有 JavaScript 错误。 https://chrome.google.com/webstore/detail/chrome-apps-extensions-de/ohmmkhmmmpcnpikjeljgnaoabkaalbgc?hl=en

这也意味着你可以在任何地方添加 console.log(“am here”)，你可以看到什么被调用了，什么没有......

这是我将您的示例与 Google 示例相结合得到的结果。

希望这有帮助!JFo

list .json

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "http://www.example.com/"
  ]
}

Popup.js

// makeWebRequest
//
// ANY URLs you want to call with "makeWebRequest" need to be listed in your manifest.json
//    https://developer.chrome.com/extensions/xhr

//
// responseType 'json' 'document' 'text'
// callback is the function to call back on success. will be passed the XMLHttpRequest
// errorCallback is called when there's a problem

function makeWebRequest(urlToLoad, responseType, callback, errorCallback) {

  console.log("making web request for: "  + urlToLoad);

  var xmlReq = new XMLHttpRequest();
  xmlReq.open('GET', urlToLoad);
  // The Google image search API responds with JSON, so let Chrome parse it.
  xmlReq.responseType = responseType;
  xmlReq.onload = function() {
    // Parse and process the response from Google Image Search.
    var response = xmlReq.response;
   /// if (!response || !response.responseData || !response.responseData.results ||
    //    response.responseData.results.length === 0) {

    if (!xmlReq.response) {
       errorCallback('No response from the web request!');
       return;
    }


    callback(xmlReq);
  };
  xmlReq.onerror = function() {
    errorCallback('Network error.');
  };
  xmlReq.send();  // this goes away, makes the internet request, then calls back when it's finished.
}




// This is called when the extension loads.

document.addEventListener('DOMContentLoaded', function () {

  // Response type:
  // use json for json, document for html documents, text for raw text

  makeWebRequest("http://www.example.com/index.html", "document", 
    function (xmlReq) {
        // this is the function that is called back on when "Send" finishes

        // returns an HTMLDocument because we passed the "document" 
        // responseType into makeWebRequest.
        var doc = xmlReq.response;

        console.log("web request finished " + xmlReq.response);

        document.getElementById('response').innerHTML = doc.documentElement.innerHTML;
    }

  , function(errorMessage) {
        // this is the function that is called back on when there is an error 
        // requesting the file
        console.log("got error:" + errorMessage);

  });

});

弹出.html

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
        font-size: 100%;
      }
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400px;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    Sample extension
    <div id="status"></div>
    <p id="response"></p>
    <img id="image-result" hidden>
  </body>
</html>

关于javascript - 如何阅读在线资源并更新 Google Chrome 扩展程序中的弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31611226/

24 4 0
文章推荐： javascript - 正则表达式从链接导出域名
文章推荐： c++ - C++中的线程程序并不快
文章推荐： javascript - 如何将目标 ="blank"添加到 Pinboard.in Linkroll 小部件？
文章推荐： javascript - 需要了解如何实现别人的jquery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com