正文

Chrome扩展将侧边栏注入页面

 2023-03-06  188

关键词：

【中文标题】Chrome扩展将侧边栏注入页面【英文标题】：Chrome extension inject sidebar into page 【发布时间】：2012-04-23 10:32:42 【问题描述】：

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

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

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

【问题讨论】：

你想在哪个站点注入你的侧边栏？看看你是否可以从页面上存在的容器的宽度减去 300px。这必须适用于任何网站。我可以尝试在网站上的主体上设置最大宽度，但它可能仍然具有固定位置元素，这将迫使它流血。元素也可以覆盖该最大宽度... 这很难做到。您可以采用的另一种方法是将整个 body DOM 包装到一个新的 div 中，然后添加 margin-right:300px;到它，但再次固定位置和浮动元素会产生问题。我建议改为添加一个可停靠面板。可停靠面板可以，但仍会覆盖内容。 Chrome 的扩展程序有一个面板窗口类型，但它们目前是实验性的。 【参考方案1】：

我相信这更容易。首先在 body 上添加 padding，为侧边栏腾出空间。然后，创建一个包含侧边栏的 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);

【讨论】：

【参考方案2】：

更新

对于任何使用谷歌搜索的人，对其进行大修以反映我在应用程序中实际使用的内容，使用 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

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

【讨论】：

这可能很接近谢谢！今天晚些时候我得试试。今天早上我简单地尝试了一下，不得不调整 document.documentElement.style.left 以及最大宽度。仍然不是 100% 相当于用户将浏览器窗口缩小到预期的最佳大小。哦，顺便说一句，是的，我正在使用 iframe 作为栏，你是对的，它确实可以防止 css 冲突。任何东西的最大 z-index 是：2147483647，使用这个非常感谢这...挽救了我的理智。我有这个确切的代码运行良好 - 它向下翻页 x 像素并插入我的 iFrame。但是，当我编辑代码以将 iFrame 放在右侧时，父页面会向左移动，但不会调整大小。所以我的 iFrame 不会掩盖父页面上的内容（这是我在找到这篇文章时试图解决的问题）。但是父页面的 1/3 与可视页面相差 300 像素（我的 iFrame 的宽度）。也许垂直更好，因为页面总是垂直滚动？关于改进左/右位移的任何想法？再次感谢！【参考方案3】：

感谢 Devin 提供示例代码。与其他答案不同，这似乎有效。我实际上将这段代码用于write an extension，旨在自己解决这个问题。但是，我遇到了困难when using it with certain Gmail tabs。

您可以查看我的 hacked-together 代码，了解 iframe 侧边栏的工作示例，该侧边栏不只是覆盖在页面上。但是，我还没有能够克服前面提到的 Gmail 错误，尽管这对您来说可能不是问题。我只是通过 iframe src 引入内容，而不是使用 document.getElementById(iframeId).contentDocument.body.innerHTML 插入内容。

【讨论】：

【参考方案4】：

好吧，你应该在你的 CSS 中添加 z-index 属性，将 width 设置为 300px 并删除 right。

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

【讨论】：

我不只是想在页面顶部覆盖一个侧边栏，我希望它强制将现有内容从右侧限制为 300px，就像侧边栏（如 Firefox 书签侧边栏）表现。在页面内容顶部弹出一个 div 没有问题。

Cakephp，将视图添加到侧边栏

...变。目前，我在/pages/home.ctp中定义了右侧边栏，但我猜测扩展该边栏会更好，因为它必须出现在每个页面中。如果这个想法是错误的，请纠正我。然后，我为“usuar 查看详情

如何将侧边栏添加到存档页面

】如何将侧边栏添加到存档页面【英文标题】：Howtoaddasidebartoarchivepage【发布时间】：2019-04-2709:22:11【问题描述】：我想通过代码向我的存档页面添加一个侧边栏。以下代码已添加到存档模板中。侧边栏已成功添加。但是，侧边... 查看详情

如何将内容从 django 中的页面传递到侧边栏？

】如何将内容从django中的页面传递到侧边栏？【英文标题】：HowdoIpasscontenttoasidebarfromapageindjango?【发布时间】：2015-10-2413:38:01【问题描述】：我正在用Django构建一个网站，我希望拥有主导航栏和一个侧面以获得更详细的信息。我... 查看详情

如何通过 Chrome 扩展将 CSS 注入网页？

】如何通过Chrome扩展将CSS注入网页？【英文标题】：HowtoinjectCSSintowebpagethroughChromeextension?【发布时间】：2011-11-2823:09:52【问题描述】：我不知道如何通过Chrome扩展程序将CSS注入网页。我正在尝试将其注入网页：bodybackground:#000!impo... 查看详情

将 html 加载到页面元素中（chrome 扩展）

】将html加载到页面元素中（chrome扩展）【英文标题】：Loadinghtmlintopageelement(chromeextension)【发布时间】：2011-08-0408:04:09【问题描述】：我正在尝试编写一个Chrome扩展程序，该扩展程序将在某些网页的顶部有一个栏。如果我有这样... 查看详情

使用 JavaScript 将 Chrome 扩展注入 iFrame

】使用JavaScript将Chrome扩展注入iFrame【英文标题】：ChromeExtensionInjectintoiFramewithJavaScript【发布时间】：2012-08-1505:31:32【问题描述】：我正在开发一个Chrome扩展程序，它允许用户在新标签页中的iframe中打开网站。我的目标是允许他... 查看详情

使用 Chrome 扩展将 CSS 注入文档检查器

】使用Chrome扩展将CSS注入文档检查器【英文标题】：UsingChromeExtensiontoinjectCSSintotheDocumentInspector【发布时间】：2011-10-1206:11:00【问题描述】：我目前正在尝试编写一个扩展来更改文档检查器的CSS（“devtools.css”）。使用内容脚本... 查看详情

自动将新帖子添加到侧边栏

】自动将新帖子添加到侧边栏【英文标题】：AutomaticallyaddnewpoststotheSidebar【发布时间】：2019-04-1504:04:32【问题描述】：我使用VuePress和NetlifyCMS作为内容管理。我有3个集合（design、front-end和back-end），其中包含无限数量的页面。这... 查看详情

Chrome 扩展将 jquery 注入 iframe

】Chrome扩展将jquery注入iframe【英文标题】：Chromeextensioninjectjqueryintoiframe【发布时间】：2016-10-0911:54:20【问题描述】：我正在尝试将jquery插入位于我的内容脚本中的iframe。问题是jqueryui确实被加载但只返回一条消息“未定义Jquery”... 查看详情

使用ivx学习开发侧边栏方面的经验分享

...和大家分享，今天要与大家分享的是利用行列容器来设计侧边栏的过程，官网富饶的demo库不仅提供了大量的模板，同时方便了ivx学习者通过共同的案例进行经验分享，大家可以去demo.ivx.cn寻找我所分析的demo，所以今天我也从官... 查看详情

从 Chrome 扩展中挂钩 Websocket

】从Chrome扩展中挂钩Websocket【英文标题】：HookingWebsocketsfromaChromeExtension【发布时间】：2018-10-0415:32:55【问题描述】：我正在尝试创建一个可以挂钩特定页面的WebSocket的Chrome扩展内容脚本。当前，当页面被访问时，内容脚本会像... 查看详情

如何使用侧边栏将引导导航栏修复到顶部

】如何使用侧边栏将引导导航栏修复到顶部【英文标题】：Howtofixbootstrapnavbartotopwithsidebar【发布时间】：2020-12-0607:45:27【问题描述】：我正在开发一个页面，其中既有sidebar也有navbar我必须将导航栏固定到顶部，以便获得更好的... 查看详情

如何在 WooCommerce 页面上维护 Wordpress 中的侧边栏位置

】如何在WooCommerce页面上维护Wordpress中的侧边栏位置【英文标题】：HowtomaintainsidebarplacementinWordpressonWooCommercepages【发布时间】：2012-07-2409:46:01【问题描述】：如果您在wordpress中使用侧边栏，您可以在其中放置导航菜单等内容。要... 查看详情

drawer实现侧边栏布局(代码片段)

在Scaffold组件里面传入drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。我们还是在前面TabBar项目的基础上实现侧边栏... 查看详情

Chrome 扩展程序如何将许多文件保存到用户指定的目录？

】Chrome扩展程序如何将许多文件保存到用户指定的目录？【英文标题】：HowcanaChromeextensionsavemanyfilestoauser-specifieddirectory?【发布时间】：2013-11-1702:19:31【问题描述】：我正在开发一个用作内部工具的Chrome扩展程序。其要求的行为... 查看详情

使用 react-router-dom 停止页面中侧边栏的重新渲染

】使用react-router-dom停止页面中侧边栏的重新渲染【英文标题】：Stopthere-renderingofSidebarinPageusingreact-router-dom【发布时间】：2020-07-1922:54:55【问题描述】：任何帮助将不胜感激，所以我有一个带有页眉、侧边栏、页脚和主页面的页... 查看详情

VueJS将活动类添加到侧边栏链接

】VueJS将活动类添加到侧边栏链接【英文标题】：VueJSaddingactiveclasstoasidebarlink【发布时间】：2021-02-2204:02:20【问题描述】：我有一个VueJS项目，它是一个管理面板。它有4个不同的主要组件，页眉、页脚、容器和侧边栏。我希望在... 查看详情

chrome扩展

chrome拓展开发实战：页面脚本的拦截注入时间 2015-07-2411:15:00 博客园精华区原文 http://www.cnblogs.com/horve/p/4672890.html主题 Chrome原文请访问个人博客： chrome拓展开发实战：页面脚本的拦截注入目前公司产... 查看详情