如何在浏览器操作点击时通过 API 发送完整的 HTML(在 JS 之后加载) - Chrome 扩展?

领克

在过去的 2 天里,我试图让在网页上看到的 HTML 通过 Chrome 扩展程序发送到特定的 API 端点(带 URL)。

主要问题是,并非所有在单击浏览器操作时在网页上看到的 HTML 内容都被发送。例如,如果网站是以稍后注入 HTML 的方式制作的,例如当用户在阅读页面 1 分钟后单击“显示更多马匹”时 - 这些新添加的马匹将不会被发送。

如果用户必须在浏览器操作后单击另一个按钮,我会很好。我认为我遇到的主要问题是我在加载内容后立即抓取 HTML。我一直试图改变这一点,但没有运气。在查看了各种 StackOverflow 帖子和 Chrome Ext 之后。docs 我有以下代码成功发送了 URL 和 HTML - 但不是所有的 HTML,如果它在 1 分钟后被添加说:

清单文件

{
  "manifest_version": 2,
  "name": "Horses extension",
  "version": "0.3",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["content.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],

  "background": {
    "scripts": ["background.js"]
  },
  "page_action": {
    "default_title": "Horses extension",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "tabs"
  ]
}

背景.js

// Called when the user clicks on the browser action.
chrome.runtime.onMessage.addListener(function (msg, sender) {
  // First, validate the message's structure
  if ((msg.from === 'content') && (msg.subject === 'showPageAction')) {
    // Enable the page-action for the requesting tab
    chrome.pageAction.show(sender.tab.id);
  }
});

内容.js

// Inform the background page that
// this tab should have a page-action
chrome.runtime.sendMessage({
  from:    'content',
  subject: 'showPageAction'
});

// Listen for messages from the popup
chrome.runtime.onMessage.addListener(function (msg, sender, response) {
  // First, validate the message's structure
  if ((msg.from === 'popup') && (msg.subject === 'horsesInformation')) {
    var a=[]
    a.push(msg.url)
    a.push(document.all[0].outerHTML)
    response(a)
  }
});

弹出窗口.js

window.addEventListener ("load", sendJobOpeningInfo, false);

function sendHorsesInformation(url_and_html) {

  var jsInitChecktimer = setInterval (checkForJS_Finish, 5000);
  
  function checkForJS_Finish (){
    clearInterval (jsInitChecktimer);
    
//GOAL: Post HTML and Domain to API
    $.ajax({
      url: "http://lvh.me:3000/api_url_xyz
      type: "POST",
      data: {url: url_and_html[0], html_source: url_and_html[1]},
      success: function (data) {
        var horsesTitle = document.getElementById('horses-title')
        horsesTitle.append("Success!!")
      }
    });
  }
}

// ...query for the active tab...
chrome.tabs.query({
  active: true,
  currentWindow: true
}, function (tabs) {
  // ...and send a request for the Domain info...
  chrome.tabs.sendMessage(
      tabs[0].id,
      {from: 'popup', subject: 'horsesInformation', url: tabs[0].url},
      // ...also specifying a callback to be
      //called from the receiving end (content script)
      sendHorsesInformation);
});

弹出窗口.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <h3 id="horses-title"></h3>
  </body>
</html>

为了将网页上看到的所有内容(即使在 JS 注入之后)发送到我的 API 端点,我需要更改什么?任何帮助将不胜感激!

领克

好的,我知道了。只需将 checkForJS_Finish 函数与 ajax 函数从 content.js 中的 popup.js 移动,它就可以工作了。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Chrome扩展程序可通过单击浏览器操作来创建.html页面。

来自分类Dev

如何在Firefox和Chrome浏览器中检测NPAPI插件/扩展的首次加载

来自分类Dev

页面重新加载chrome扩展消息发送?

来自分类Dev

如何指示Chrome扩展程序在每次打开HTML时都不要重新加载HTML?

来自分类Dev

用户单击浏览器操作并弹出窗口时如何执行操作(Chrome扩展程序)

来自分类Dev

如何从Chrome扩展程序中的网站获取完整的HTML源代码

来自分类Dev

在Chrome扩展程序中重新加载浏览器后,如何保留变量的值

来自分类Dev

Chrome扩展程序:如何在开始加载前更改JS网址

来自分类Dev

在 Chrome 扩展程序中使用 Gmail API 发送电子邮件时获取 401 状态

来自分类Dev

Chrome 扩展:向 node.js 服务器发出 http 请求,发送 cookie 凭据(CORS)

来自分类Dev

Chrome-扩展程序加载时崩溃

来自分类Dev

Chrome扩展程序提取错误的元数据而没有重新加载整个页面(原始HTML和浏览器的解释之间存在差异)

来自分类Dev

如何自动重新加载chrome扩展程序?

来自分类Dev

如何自动重新加载chrome扩展程序?

来自分类Dev

从已加载的iframe将消息发送回Chrome扩展程序

来自分类Dev

从已加载的iframe将消息发送回Chrome扩展程序

来自分类Dev

让 HTML 内联事件在 Chrome 扩展的 popup.js 中工作

来自分类Dev

浏览器扩展:加载元素时如何执行功能

来自分类Dev

Chrome扩展程序:在页面加载之前注入JS

来自分类Dev

将Mixpanel与chrome扩展集成(无浏览器操作)

来自分类Dev

在Google Chrome浏览器扩展程序弹出窗口中发送异步消息

来自分类Dev

如何使Chrome浏览器扩展程序打开外部页面,而不是打开默认页面popup.html

来自分类Dev

通过浏览器操作/图标禁用/启用Chrome扩展程序

来自分类Dev

Chrome扩展程序未加载到YouTube的浏览器导航中

来自分类Dev

Chrome扩展程序未加载到YouTube的浏览器导航中

来自分类Dev

单击“ Chrome扩展程序”浏览器操作按钮时不显示弹出窗口

来自分类Dev

切换标签页时,Chrome扩展程序浏览器操作异常

来自分类Dev

如何通过javascript重新加载chrome扩展程序?

来自分类Dev

如何使用浏览器的(chrome / firefox)HTML / CSS / JS渲染引擎生成PDF?

Related 相关文章

  1. 1

    Chrome扩展程序可通过单击浏览器操作来创建.html页面。

  2. 2

    如何在Firefox和Chrome浏览器中检测NPAPI插件/扩展的首次加载

  3. 3

    页面重新加载chrome扩展消息发送?

  4. 4

    如何指示Chrome扩展程序在每次打开HTML时都不要重新加载HTML?

  5. 5

    用户单击浏览器操作并弹出窗口时如何执行操作(Chrome扩展程序)

  6. 6

    如何从Chrome扩展程序中的网站获取完整的HTML源代码

  7. 7

    在Chrome扩展程序中重新加载浏览器后,如何保留变量的值

  8. 8

    Chrome扩展程序:如何在开始加载前更改JS网址

  9. 9

    在 Chrome 扩展程序中使用 Gmail API 发送电子邮件时获取 401 状态

  10. 10

    Chrome 扩展:向 node.js 服务器发出 http 请求,发送 cookie 凭据(CORS)

  11. 11

    Chrome-扩展程序加载时崩溃

  12. 12

    Chrome扩展程序提取错误的元数据而没有重新加载整个页面(原始HTML和浏览器的解释之间存在差异)

  13. 13

    如何自动重新加载chrome扩展程序?

  14. 14

    如何自动重新加载chrome扩展程序?

  15. 15

    从已加载的iframe将消息发送回Chrome扩展程序

  16. 16

    从已加载的iframe将消息发送回Chrome扩展程序

  17. 17

    让 HTML 内联事件在 Chrome 扩展的 popup.js 中工作

  18. 18

    浏览器扩展:加载元素时如何执行功能

  19. 19

    Chrome扩展程序:在页面加载之前注入JS

  20. 20

    将Mixpanel与chrome扩展集成(无浏览器操作)

  21. 21

    在Google Chrome浏览器扩展程序弹出窗口中发送异步消息

  22. 22

    如何使Chrome浏览器扩展程序打开外部页面,而不是打开默认页面popup.html

  23. 23

    通过浏览器操作/图标禁用/启用Chrome扩展程序

  24. 24

    Chrome扩展程序未加载到YouTube的浏览器导航中

  25. 25

    Chrome扩展程序未加载到YouTube的浏览器导航中

  26. 26

    单击“ Chrome扩展程序”浏览器操作按钮时不显示弹出窗口

  27. 27

    切换标签页时,Chrome扩展程序浏览器操作异常

  28. 28

    如何通过javascript重新加载chrome扩展程序?

  29. 29

    如何使用浏览器的(chrome / firefox)HTML / CSS / JS渲染引擎生成PDF?

热门标签

归档