创建谷歌浏览器扩展程序：自动抓取网站内容并显示

制作一个自动抓取网站内容的谷歌浏览器扩展程序

本文将指导您创建一个谷歌浏览器扩展程序，该程序可以自动抓取指定网站元素的内容，并将内容显示在弹出的程序页面中。

1. 创建扩展程序

在谷歌浏览器中，打开扩展程序页面（chrome://extensions/），并点击“新建扩展程序”按钮。填写扩展程序的名称、描述和版本号等基本信息，选择扩展程序的图标和启动页面。

2. 编写代码

在启动页面中，编写以下代码：

<!doctype html>
<html>
  <head>
    <title>My Extension</title>
    <style>
      body {
        width: 300px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id='content'></div>
    <script>
      window.onload = function() {
        chrome.tabs.getSelected(null, function(tab) {
          chrome.tabs.executeScript(tab.id, {code: 'document.querySelector('元素选择器').innerText'}, function(result) {
            document.getElementById('content').innerHTML = result[0];
          });
        });
      };
    </script>
  </body>
</html>

代码说明：

document.querySelector('元素选择器')：用于选择需要抓取内容的元素。
innerText：获取元素的文本内容。
document.getElementById('content').innerHTML = result[0]：将抓取到的内容显示在程序页面中。

3. 使用示例

假设您要抓取百度首页的搜索框内容，则需要将 '元素选择器' 替换为 '#kw'：

chrome.tabs.executeScript(tab.id, {code: 'document.querySelector('#kw').value'}, function(result) {
  document.getElementById('content').innerHTML = result[0];
});

4. 加载扩展程序

保存并加载扩展程序，打开百度首页即可看到弹出的程序页面，并自动抓取搜索框中的内容显示在页面中。

总结

通过以上步骤，您便可以创建出一个自动抓取网站内容并显示的谷歌浏览器扩展程序。您可以根据自己的需求修改代码，实现更多功能。