Html Chrome 扩展 - 获取当前标签的全部文本内容

Chrome Extension - Get entire text content of the current tab

提问by ananthv

I'm developing an extension where i need to get the entire text content on the current tab. Now i've a plugin which retrieves selected text from the current tab. So, in essence i'm looking for the ctrl-A version of it :). This is what i've done so far taking the hint from @Derek.

我正在开发一个扩展，我需要在当前选项卡上获取整个文本内容。现在我有一个插件可以从当前选项卡中检索选定的文本。所以，本质上我正在寻找它的 ctrl-A 版本:)。到目前为止，这是我根据@Derek 的提示所做的工作。

This is in my event handler(this is just one, there are other listeners too for onUpdatedetc):

这是在我的事件处理程序中（这只是一个，还有其他侦听器onUpdated等等）：

chrome.tabs.onSelectionChanged.addListener(function(tabId,changeInfo,tab){  
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
  selectedtext = response.data;
});
chrome.tabs.sendRequest(tab.id, {method: "getText"}, function (response) {
  alltext = response.data;
});
});
});

This is what i've written in the content script:

这是我在内容脚本中写的：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
  sendResponse({data: window.getSelection().toString()});
else if (request.method == "getText")
  sendResponse({data: document.body.innerText});
else 
  sendResponse({});
});

However the document.body.innerTextis returning undefined. I need the entire text of the current tab in alltext. Can someone help me out on this? Thanks.

但是document.body.innerText返回未定义。我需要alltext. 有人可以帮我解决这个问题吗？谢谢。

回答by u283863

You can use document.body.innerTextor document.all[0].innerTextto do it in the content script.
It will get all the text contentin the page, without any HTML code.

您可以使用document.body.innerText或document.all[0].innerText在内容脚本中执行此操作。
它将获取页面中的所有文本内容，无需任何 HTML 代码。

Or you can use document.all[0].outerHTMLto get the HTML of the whole page.

或者您可以使用document.all[0].outerHTML来获取整个页面的 HTML。

---

---

Example

例子

In the Content Script

在内容脚本中

function getText(){
    return document.body.innerText
}
function getHTML(){
    return document.body.outerHTML
}
console.log(getText());             //Gives you all the text on the page
console.log(getHTML());             //Gives you the whole HTML of the page

---

---

Added

添加

So you want the content script to return the textto the popup. You can use:

因此，您希望内容脚本将文本返回到弹出窗口。您可以使用：

• chrome.tabs.getSelectedto get the tab selected,
• chrome.tabs.sendRequestto send request to the content script,
• and chrome.extension.onRequest.addListenerto listen to requests.

• chrome.tabs.getSelected选择选项卡，
• chrome.tabs.sendRequest向内容脚本发送请求，
• 并chrome.extension.onRequest.addListener听取请求。

Popup page

弹出页面

chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getText"}, function(response) {
        if(response.method=="getText"){
            alltext = response.data;
        }
    });
});

Content Script

内容脚本

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        if(request.method == "getText"){
            sendResponse({data: document.all[0].innerText, method: "getText"}); //same as innerText
        }
    }
);

This should work.

这应该有效。

回答by user202729

Use executeScript: (requires permission activeTab)

使用executeScript：（需要许可activeTab）

chrome.tabs.executeScript(null, {
    code: `document.all[0].innerText`,
    allFrames: false, // this is the default
    runAt: 'document_start', // default is document_idle. See https://stackoverflow.com/q/42509273 for more details.
}, function(results) {
    // results.length must be 1
    var result = results[0];
    process_result(result);
});

In case the codeis complex, it's possible to define a function in the content script and call that function in the code(or use file).

如果code很复杂，则可以在内容脚本中定义一个函数并在code（或使用file）中调用该函数。