使用 Chrome 扩展程序提取网页中包含的整个文本 [英] Extract the whole text contained in webpage using Chrome extension

问题描述

我正在开发用于 Google 搜索结果文本解析的 Chrome 扩展程序.我希望用户在多功能框中插入特定文本，然后直接进入 Google 搜索页面.

I'm developing a Chrome extension for text parsing of Google search results. I want the user to insert a certain text in the omnibox, and then be direct to a Google search page.

function navigate(url) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    chrome.tabs.update(tabs[0].id, {url: url});
    });
}

chrome.omnibox.onInputEntered.addListener(function(text) {
    navigate("https://www.google.com.br/search?hl=pt-BR&lr=lang_pt&q=" + text + "%20%2B%20cnpj");
});

alert('Here is where the text will be extracted');

将当前选项卡定向到搜索页面后，我想获取页面的纯文本形式，然后对其进行解析.实现此目的最直接的方法是什么?

After directing the current tab to the search page, I want to get the plain text form of the page, to parse it afterwards. What is the most straightforward way to accomplish this?

推荐答案

好吧，作为 DOM 而不是纯文本解析网页可能会更容易.但是，这不是您的问题.

Well, parsing the webpage is probably going to be easier to do as a DOM instead of plain text. However, that is not what your question asked.

您的代码在导航到页面的方式和处理网络导航的异步性质方面存在问题.这也不是您的问题所问的内容，而是会影响您所询问的内容(从网页获取文本)的实施方式.

Your code has issues with how you are navigating to the page and dealing with the asynchronous nature of web navigation. This is also not what your question asked, but impacts how what you did ask about, getting text from a webpage, is implemented.

因此，为了回答您关于如何从网页中提取纯文本的问题，我在用户单击 browser_action 按钮时实现了这样做.这将回答如何做到这一点与代码中的其他问题分开.

As such, to answer your question of how to extract the plain text from a webpage, I implemented doing so upon the user clicking a browser_action button. This separates answering how this can be done from the other issues in your code.

正如评论中提到的 wOxxOm，要访问网页的 DOM，您必须使用内容脚本.正如他所做的那样，我建议您阅读 Chrome 扩展程序概述.您可以使用 chrome.tabs.executeScript<注入内容脚本/a>.通常，您会使用 details 参数的 file 属性注入包含在单独文件中的脚本.对于只是发送回网页文本(没有解析等)的简单任务的代码，插入最基本的方式所需的单行代码是合理的.要插入一小段代码，您可以使用 details 参数的 code 属性来执行此操作.在这种情况下，假设您没有说明您对文本的要求，document.body.innerText 是返回的文本.

As wOxxOm mentioned in a comment, to have access to the DOM of a webpage, you have to use a content script. As he did, I suggest you read the Overview of Chrome extensions. You can inject a content script using chrome.tabs.executeScript. Normally, you would inject a script contained in a separate file using the file property of the details parameter. For code that is just the simple task of sending back the text of the webpage (without parsing, etc), it is reasonable to just insert the single line of code that is required for the most basic way of doing so. To insert a short segment of code, you can do so using the code property of the details parameter. In this case, given that you have said nothing about your requirements for the text, document.body.innerText is the text returned.

要将文本发送回后台脚本，chrome.runtime.使用 sendMessage().

To send the text back to the background script, chrome.runtime.sendMessage() is used.

为了在后台脚本中接收文本，在 receiveTextrel="nofollow noreferrer">chrome.runtime.onMessage.

To receive the text in the background script, a listener, receiveText, is added to chrome.runtime.onMessage.

background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    console.log('Injecting content script(s)');
    //On Firefox document.body.textContent is probably more appropriate
    chrome.tabs.executeScript(tab.id,{
        code: 'document.body.innerText;'
        //If you had something somewhat more complex you can use an IIFE:
        //code: '(function (){return document.body.innerText})();'
        //If your code was complex, you should store it in a
        // separate .js file, which you inject with the file: property.
    },receiveText);
});

//tabs.executeScript() returns the results of the executed script
//  in an array of results, one entry per frame in which the script
//  was injected.
function receiveText(resultsArray){
    console.log(resultsArray[0]);
}

manifest.json:

{
    "description": "Gets the text of a webpage and logs it to the console",
    "manifest_version": 2,
    "name": "Get Webpage Text",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

    "background": {
        "scripts": [
            "background.js"
        ]
    },

    "browser_action": {
        "default_icon": {
            "32": "myIcon.png"
        },
        "default_title": "Get Webpage Text",
        "browser_style": true
    }
}

这篇关于使用 Chrome 扩展程序提取网页中包含的整个文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！