Question

在过去的两天里，我尝试将网页上显示的HTML通过Chrome扩展程序发送到特定的API端点（使用网址）。

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

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

的manifest.json

＆＃13;

{
  "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"
  ]
}

＆＃13;

background.js

＆＃13;

// 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);
  }
});

＆＃13;

Content.js

＆＃13;

// 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)
  }
});

＆＃13;

popup.js

＆＃13;

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);
});

＆＃13;

popup.html

＆＃13;

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

＆＃13;

我需要更改网页上看到的所有内容（即使在JS注入后）都会发送到我的API端点吗？任何帮助将不胜感激！

Answer 1

好的，明白了。只需要在content.js中的popup.js中使用ajax函数移动checkForJS_Finish函数，它就可以工作。

如何在浏览器操作点击时通过API发送完整的HTML（在JS之后加载） - Chrome扩展程序？

1 个答案: