Chrome扩展程序将侧边栏注入页面

Chrome extension inject sidebar into page

本文关键字：注入 侧边栏 扩展 程序 Chrome      更新时间：2023-09-26

我希望我的 chrome 扩展程序能够在激活任何页面的右侧注入 300px 的侧边栏。 我正在寻找将整个页面限制为 document.body.clientWidth - 300 的最佳方法，从而将右侧的 300px 留给我的侧边栏。 我当前注入的侧边栏附加到 document.body 中，样式如下：

width:300px
position: fixed
top: 0px
right: 0px
height:500px

我需要一种方法来防止现有页面元素渗入我的侧边栏。 我希望有一种方法可以欺骗现有元素，使其认为它们正在渲染到比实际窗口窄 300px 的浏览器客户端中，从而为我的侧边栏留出空间，但我还没有找到任何简单的方法这样做......

我相信这更容易。首先向正文添加填充，为侧边栏腾出空间。然后，创建一个包含侧边栏的div。使用具有固定定位的 CSS 将div 相对于页面的右侧和顶部定位。还要设置侧边栏div 的高度和宽度。

代码（使用 JQuery）：

  var sidebar;
  $('body').css({
    'padding-right': '350px'
  });
  sidebar = $("<div id='sidebar'></div>");
  sidebar.css({
    'position': 'fixed',
    'right': '0px',
    'top': '0px',
    'z-index': 9999,
    'width': '290px',
    'height': '100%',
    'background-color': 'blue'  // Confirm it shows up
  });
  $('body').append(sidebar);

更新

对于任何谷歌搜索的人，请对其进行大修以反映我在应用程序中实际使用的内容，使用jQuery，提供更多保护措施，并更加尊重当前页面css。

//height of top bar, or width in your case
var height = '30px';
//resolve html tag, which is more dominant than <body>
  var html;
  if (document.documentElement) {
    html = $(document.documentElement); //just drop $ wrapper if no jQuery
  } else if (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
    html = $(document.getElementsByTagName('html')[0]);
  } else if ($('html').length > -1) {//drop this branch if no jQuery
    html = $('html');
  } else {
    alert('no html tag retrieved...!');
    throw 'no html tag retrieved son.';
  }
//position
if (html.css('position') === 'static') { //or //or getComputedStyle(html).position
  html.css('position', 'relative');//or use .style or setAttribute
}
//top (or right, left, or bottom) offset
var currentTop = html.css('top');//or getComputedStyle(html).top
if (currentTop === 'auto') {
  currentTop = 0;
} else {
  currentTop = parseFloat($('html').css('top')); //parseFloat removes any 'px' and returns a number type
}
html.css(
  'top',     //make sure we're -adding- to any existing values
  currentTop + parseFloat(height) + 'px'
);

你快完成了。您已设置了页面 html 的样式。您可能已经注意到页面中的css会影响您的东西。您可以通过将其包含在 iframe 中来解决此问题：

var iframeId = 'someSidebar';
if (document.getElementById(iframeId)) {
  alert('id:' + iframeId + 'taken please dont use this id!');
  throw 'id:' + iframeId + 'taken please dont use this id!';
}
html.append(
  '<iframe id="'+iframeId+'" scrolling="no" frameborder="0" allowtransparency="false" '+
    'style="position: fixed; width: 100%;border:none;z-index: 2147483647; top: 0px;'+
           'height: '+height+';right: 0px;left: 0px;">'+
  '</iframe>'
);
document.getElementById(iframeId).contentDocument.body.innerHTML =
  '<style type="text/css">'
    html, body {          '
      height: '+height+'; '
      width: 100%;        '
      z-index: 2147483647;'
    }                     '
  </style>                '
  <p>UNSTYLED HTML!</p>';

是的，您必须在设置内部HTML之前附加iframe

。

您应该能够复制/粘贴和编辑它并成为您的一种方式！

感谢 Devin 提供的示例代码。与其他答案不同，这似乎有效。我实际上使用此代码编写了一个扩展，旨在自己解决此问题。但是，在与某些Gmail选项卡一起使用时，我遇到了困难。

你可以看看我的黑客代码，了解iframe侧边栏的工作示例，它不是简单地覆盖在页面上。但是，我还没有能够克服上述Gmail错误，尽管这对您来说可能不是问题。我只是通过 iframe src 引入内容，而不是插入带有 document.getElementById(iframeId).contentDocument.body.innerHTML 的内容。

好吧，您应该将z-index属性添加到css中，将宽度设置为300px并删除权限。

但我希望你能改变主意:)

Chrome 114+ 支持文档外的适当侧边栏。该 API 称为 sidePanel。

我相信您只需要此清单即可使其出现在本机侧边栏列表中：

{
  "name": "My side panel extension",
  "permissions": [
    "sidePanel"
  ],
  "side_panel": {
    "default_path": "sidepanel.html"
  }
}

您也可以在单击扩展时将其打开action方法是将其添加到后台工作线程中：

chrome.sidePanel.setPanelBehavior({
  openPanelOnActionClick: true
});

然后是清单的此键：

  "action": {
    "default_title": "Click to open panel"
  },
相关文章：