Chrome扩展程序按钮弹出窗口

时间:2017-04-22 19:42:13

标签: javascript jquery html css google-chrome-extension

我想创建一个chrome扩展程序,为特定页面添加一个按钮,点击该按钮后,我希望弹出窗口显示在https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

我使用了内容脚本,我在.css文件中包含了该链接的css内容,并且我在内容脚本中有一个.js文件,它在屏幕上注入一个按钮。

我的按钮出现在屏幕上。我想知道的是,如何获得弹出窗口中显示的链接?他们在链接中使用了一个html文件,但我通过内容脚本在现有的html页面中进行了更改。那我该怎么办呢?

我的内容脚本的.js文件:

var button = document.createElement("button");
//button description

var body = document.getElementsByClassName("htmlclassname")[0];
body.insertBefore(button, body.childNodes[0]);
//Button appearing properly

button.addEventListener("click", function() {
    //What code do I put here to get a popup like in the link??????
});

2 个答案:

答案 0 :(得分:1)

您需要为弹出窗口注入所有DOM,以及按钮。

您可以在按钮的点击事件中执行此操作:

var button = document.createElement('button');
button.innerText = 'Show Popup';
button.style.position = 'relative';

document.querySelector('body').appendChild(button);

button.addEventListener('click', function(e) {
  var popup = document.querySelector('#myPopup');
  if (!popup) {
    popup = document.createElement('div');
    popup.style.visibility = 'hidden';
    popup.style.width = '160px';
    popup.style.backgroundColor = '#555';
    popup.style.color = '#fff';
    popup.style.textAlign = 'center';
    popup.style.borderRadius = ' 6px';
    popup.style.padding = '8px 0';
    popup.style.position = 'absolute';
    popup.style.zIndex = '1';
    popup.style.bottom = '125%';
    popup.style.left = '50%';
    popup.style.marginLeft = '-80px';
    popup.innerText = 'A Simple Popup!';
    popup.id = 'myPopup';
    button.appendChild(popup);
  }

  if (popup.style.visibility === 'hidden')
    popup.style.visibility = 'visible';
  else
    popup.style.visibility = 'hidden';
});
<div>Content already in page.
  <p>blah blah blah</p>
</div>

答案 1 :(得分:0)

您可能需要查看Getting Started: Building a Chrome Extension,其中显示了在单击图标后如何实现打开弹出窗口。如给定链接中所述,呈现弹出窗口内容的实际逻辑由popup.js实现。

然后,在第一个扩展程序启动并运行后,您可以fiddle your code完全按照自己的意愿设置浏览器操作按钮上的工具提示。

可以通过在清单文件中指定default_title键来设置工具提示。打开manifest.json,然后将default_title密钥添加到browser_action。确保JSON有效,因此请引用密钥并在必要时添加逗号。

示例代码:

{
  ...
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },
  ...
}

此相关SO post中的建议解决方案也可能有所帮助。