Chrome扩展将侧边栏注入页面

njthzxwz 于 2023-08-01 发布在 Go

关注(0)|答案(5)|浏览(158)

我希望我的Chrome扩展能够在激活时在任何页面的右侧注入300 px的侧边栏。我正在寻找最好的方法来约束整个页面到document.body.clientWidth - 300，从而离开300 px的权利，我的侧边栏。我目前注入的侧边栏被附加到document.body，并且具有如下样式：

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

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

google-chrome

来源：https://stackoverflow.com/questions/10100540/chrome-extension-inject-sidebar-into-page

5条答案

按热度按时间

ni65a41a1#

我相信这会更简单。首先在正文中添加填充，为边栏腾出空间。然后，创建一个包含边栏的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);

字符串

赞(0）回复(0）举报 2023-08-01

disbfnqx2#

更新

对于任何人谷歌，大修，以反映我在应用程序中实际使用的，使用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>';

型
是的，您必须在设置innerHTML之前附加iframe
你应该能够复制/粘贴和编辑这一点，并成为一个你的方式！

赞(0）回复(0）举报 2023-08-01

x33g5p2x3#

感谢迪文提供的示例代码。与其他答案不同的是，这似乎起了作用。我实际上使用了这个代码到write an extension，旨在解决这个问题。但是，我遇到了困难when using it with certain Gmail tabs。
你可以看看我的代码，它是一个iframe侧边栏的工作示例，而不是简单地覆盖在页面上。然而，我还没有能够克服上述Gmail的错误，虽然这可能不是一个问题，你。我只是通过iframe src引入内容，而不是使用document.getElementById(iframeId).contentDocument.body.innerHTML插入内容。

赞(0）回复(0）举报 2023-08-01

ifsvaxew4#

那么，你应该只添加z-index属性到你的css，设置width为300 px并删除right。

但我希望你会改变主意：）*

赞(0）回复(0）举报 2023-08-01

oxosxuxt5#

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"
  },

型

赞(0）回复(0）举报 2023-08-01

我来回答

Chrome扩展将侧边栏注入页面

5条答案

更新

相关问题

热门标签

最新问答