HTML5大纲查看器：Chrome插件新星

由于原始代码已经是一个较为完整的示例，下面的代码实例将是一个简化版本，展示了如何在一个Chrome扩展中注入一个简单的HTML5大纲查看器。




// manifest.json
{
  "name": "HTML5 大纲查看器",
  "version": "1.0",
  "description": "为网页提供HTML5大纲查看器的支持",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentscript.js"]
    }
  ]
}
 
// popup.html
<!DOCTYPE html>
<html>
<head>
  <title>HTML5 大纲查看器</title>
</head>
<body>
  <p>点击图标为当前页面启用大纲查看器。</p>
</body>
</html>
 
// contentscript.js
function injectOutlineViewer() {
  // 创建大纲查看器的DOM元素
  const viewer = document.createElement('div');
  viewer.id = 'html5-outline-viewer';
  // 添加样式（简化版）
  viewer.style.position = 'fixed';
  viewer.style.top = '0';
  viewer.style.left = '0';
  // 构建大纲树并添加到DOM中
  const outline = constructOutlineTree();
  viewer.innerHTML = '<h1>大纲</h1>' + outline;
  document.body.appendChild(viewer);
}
 
function constructOutlineTree() {
  // 模拟构建大纲树的逻辑
  const headings = document.querySelectorAll('h1, h2, h3');
  let outline = '';
  headings.forEach(heading => {
    outline += `<li><a href="#${heading.id}">${heading.textContent}</a></li>`;
  });
  return `<ul>${outline}</ul>`;
}
 
// 注入大纲查看器
injectOutlineViewer();

这个简化版的代码实例展示了如何在一个Chrome扩展中注入一个简单的HTML5大纲查看器。它定义了一个injectOutlineViewer函数来创建一个DOM元素并将大纲树作为HTML插入，然后将其添加到页面的body中。这个例子省略了具体的构建大纲树的逻辑，并假设constructOutlineTree函数返回了一个构建好的大纲列表HTML字符串。

HTML5大纲查看器：Chrome插件新星

评论已关闭

推荐阅读