Question

我创建了一个chrome扩展程序，它是聊天室的扩展程序。我需要将它贴在屏幕上，如sticky note chrome extension

我在popup.html文件中使用以下代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat Adda</title>
    <style>
    body{}
    .resize{min-width:640px; min-height:480px; resize:both; overflow: auto;}
    .row{background-color:#5cbf2a;text-align:center;padding:5px 10px 5px 10px;}
    </style>
  </head>
  <body>
  <div class="resize">
    <iframe id="theFrame" src="http://chatadda.com" style="width:100%;height:100%;" frameborder="0"></iframe>
    <div class="row">
    <span><a href="http://chatadda.com" target="_blank"><img src="/open.png" width="32px" height="32px"/></a></span>
    <span><a href="https://play.google.com/store/apps/details?id=com.chatadda.android&hl=en" target="_blank"><img src="/android.png" width="32px" height="32px"/></a></span>
    <span><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//chatadda.com/" target="_blank"><img src="/facebook.png" width="32px" height="32px"/></a></span>
    <span><a href="https://twitter.com/home?status=ChatAdda.com%20-%20Chat,%20flirt,%20date%20and%20make%20new%20friends.%20Chat%20with%20strangers%20in%20private%20chat%20rooms.%20It's%20fast,%20secure%20and%20free." target="_blank"><img src="/twitter.png" width="32px" height="32px"/></a></span>
    <span><a href="https://plus.google.com/share?url=http%3A//chatadda.com/" target="_blank"><img src="/google.png" width="32px" height="32px"/></a></span>
    </div>
    </div>
  </body>
</html>

我该怎么做？

Answer 1

请注意，您展示的示例是Chrome应用，而不是扩展程序。 您无法复制该内容（即扩展程序中的chrome.app.window API)。 Chrome应用已被主动弃用：您无法发布新版本（ChromeOS除外）。

如果您只需要一个单独的窗口，则可以使用chrome.windows.create类型调用"popup"。但是你无法将它放在其他窗口之上。你没有准确指出你需要的东西，也许并不是必需的。

解决方案suggested by Edmund Lee（使用内容脚本将您的UI注入DOM）会在其他页面中添加您的UI 。可能有用，但如何使其正常工作是一个广泛而复杂的主题。

Answer 2

popup.html仅是您点击Chrome扩展程序图标后的弹出窗口。您需要的是添加content.js文件。有关详细信息，请查看此SO主题。

Chrome Extension Context Menu: how to append div to page after clicking menu item

How to insert HTML with a chrome extension?

Google文档： https://developer.chrome.com/extensions/content_scripts

其余的只是将dom节点附加到页面，并使用CSS来定位它。

如何使Chrome扩展程序粘滞？

2 个答案: