一个Chrome扩展如何在页面底部添加一个浮动条？ [英] How can a chrome extension add a floating bar at the bottom of pages?

问题描述

我正在创建一个需要在页面底部注入浮动元素（即<$​​ c $ c> position：fixed ）
的chrome扩展。我的要求是：

• 我需要从内容脚本中访问它里面的元素。
  
  这是因为我将事件附加到按钮上，以便用户可以从浮动栏中对当前选项卡执行操作。


• 我希望它的样式保持独立于当前页面的样式。 b
  
  $ b

  到目前为止，我已经尝试了三种解决方案，并没有提出任何建议。

  
  

  1. 内容脚本注入一个固定的HTML元素。
     
     这个解决方案的问题在于页面的样式和元素的样式会影响每个元素其他因此导致网页影响我的元素的风格，反之亦然。

  2. 内容脚本注入iframe >
     这里的问题是，无法从创建iframe的内容脚本访问iframe中的元素，另一方面，chrome扩展不允许运行内容脚本（即使使用 all_frames：true ）。

  扩展Devtool面板
  
  这不符合我的需求，因为我需要我的面板在每个页面上显示。例如用户可以执行一个动作，打开几个选项卡，并让它们都具有我的元素。在devtool面板中，我的用户必须手动打开所有选项卡中的devtoold。

  解决方案

  正如Sudarshan所评论的，iframe是最好的实践。

  
  
  

  in为了在iframe中运行脚本，我只在我的插件中包含了iframe.html和script.js。在我的内容脚本中，我获得了 chrome.extension.getURL（'iframe .html'） （只有后台脚本可以访问这个API，所以我使用 Message Passing ）脚本包含在iframe中的相关脚本标记中，如下所示：< script src =script.js>< / script> code>

  
  
  

  令我惊讶的是，尽管script.js未包含在清单中，但它仍然可以访问chrome api，更重要的是在我的的情况下，发送消息到后台脚本。

  
  

  I am creating a chrome extension that needs to inject a floating element (i.e position:fixed) at the bottom of pages . My requirements are:

  • I need to access elements inside it from a content script.
    This is because I attach events to buttons so the user can perform actions on the current tab from the floating bar.
  • I want it's styles to remain as independent from styles of the current page.

  So far I have tryed three solutions and came up with nothing.

  1. content script injecting a fixed html element.
     The problem with this solution is that the style of the page and the style of my element would effect each other thus resulting in web pages affecting the style of my element an vice versa.

  2. content script injecting an iframe.
     The problem here was it is impossible to access elements inside the iframe from the content script that created the iframe and on the other hand chrome extensions do not allow running content scripts inside a dynamically injected iframes (even when using all_frames: true).

  3. Extending the Devtool panel
     This did not fit my needs since I needed my panel to show on every page. e.g the user can preform an action that opens several tabs and have all of them have my element. in the devtool panel my user would then have to open devtoold in all tabs manually.

  Please advise.

  解决方案

  As Sudarshan commented, an iframe is the best practice here.

  in order to run a script within the iframe I simply included the iframe.html and script.js within my plugin. In my content script I got the iframe with chrome.extension.getURL('iframe.html') (only background script can access this API so I used Message Passing) the script was included as a relative script tag within the iframe like so: <script src="script.js"></script>

  The surprising part for me was that although script.js was not included in the manifest, It can still access chrome api and, more importantly in my case, send messages to the background script.

  这篇关于一个Chrome扩展如何在页面底部添加一个浮动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！