如何在当前页面内插入侧边栏以显示输出？

Answer 1

这是一种方法，尽管实际的解决方案取决于您要注入侧边栏的网站是如何构建的。在这里，我们只是使用 margin-left 将网站内容移出侧边栏。其他方法可能包括将网页内容以及侧边栏浮动到左侧。 div some_webpage 代表，例如某些网页的正文元素。

function addSideBar() {
  let barWidth = 100;

  // Make sidebar
  let div = document.createElement("div");
  div.style.position = "fixed";
  div.style.left = "0";  
  div.style.top = "0";
  div.style.width = `${barWidth}px`;
  div.style.height = "100vh";
  div.style.zIndex = "9999";
  div.style.backgroundColor = "white";
  div.style.color = "black";

  div.innerHTML = "<p>This is a sidebar</p>";

  // Float the current page to right
  document.querySelector('#some_webpage').style.marginLeft = `${barWidth}px`;
  document.querySelector('#some_webpage').style.maxWidth = `calc(100vw - ${barWidth}px)`;
  document.querySelector('body').style.position = "absolute";


  // Inject to current page
  document.querySelector('#some_webpage').prepend(div);
}

<div id = "some_webpage">
  <h1> Some webpage header </h1>
  <p> Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content textSome webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text  Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text Some webpage content text </p>
  <button onClick="addSideBar()">Add sidebar</button>
</div>

内容脚本

let barWidth = 100;

// Make sidebar
let div = document.createElement("div");
div.style.position = "fixed";
div.style.left = "0";  
div.style.top = "0";
div.style.width = `${barWidth}px`;
div.style.height = "100vh";
div.style.zIndex = "9999";
div.style.backgroundColor = "white";
div.style.color = "black";

div.innerHTML = "<p>This is a sidebar</p>";

// Float the current page to right
document.querySelector('body').style.marginLeft = `${barWidth}px`;
document.querySelector('body').style.maxWidth = `calc(100vw - ${barWidth}px)`;
document.querySelector('body').style.position = "absolute";


// Inject to current page
document.querySelector('body').prepend(div);

显现

{
  "name": "asd",
  "description": "asd",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [ 
  {
    "js": ["index.js" ],
    "matches": ["*://*.stackoverflow.com/*"]
  }]
}