Chrome 扩展程序:如何通过单击 html 弹出窗口中的按钮在新选项卡中打开指定链接?

Cyclicz

我正在尝试将脚浸入正在创建镀铬扩展的游泳池的水中。我试图从一些我认为很简单的事情开始,但事实证明它让我很难过,因为我真的不知道在哪里可以阅读有关此类事情的信息。

无论如何,目前我的目标是拥有一个执行以下操作的 chrome 扩展程序:您单击扩展程序图标 -> 一个 HTML 弹出文件打开,显示单个按钮 -> 当您单击此按钮时,它会在新的 chrome 选项卡中打开一个指定的链接,然后将其更改为您的活动选项卡。

从我的搜索中,我发现我可能必须使用后台脚本,这样我才不会违反有关 Manifest 版本 2 或类似内容的政策,我尝试了它,但它对我来说并没有真正起作用。如果这不是问题,我真的不想徘徊创建一个全新的脚本。

这是我的 manifest.json 文件,然后是我的 popup.html 文件。

 {
  "manifest_version": 2,

  "name": "strong text",
  "author": "authorname",
  "description": "desctext",
  "version": "1.4",

  "permissions": [
    "tabs"
  ],

"icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },


  "browser_action": {
    "default_popup": "popup.html"
  }
}

<!doctype html>
<html>
<head>
    <title>Hovertext</title>
    <script src="popup.js"></script>
</head>
<body>

    <div id="header">
    <h1>Header</h1>
    </div>
    <div id="divider">
        <p><button type="button" id="buttonA">Button Text</button>
	<script>
	var button1 = document.getElementById("buttonA");
	button1.addEventListener("click", function() {
    chrome.tabs.create({url: "http://www.google.com/"});
	});
	</script>
    </div>
        <div id="footer">
            footer stuff here
            </div>
</body>
<style>
    body {
        background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
    }
    #header {
        background-color:rgb(96, 222, 72);
        text-align:center;
        padding:1px;
    }
    #footer {
        background-color:rgb(96, 222, 72);
        clear:both;
        text-align:center;
        padding:1px;
    }
    #divider {
        text-align:center;
    }
    #buttonA {
        color:white;
        background-color:rgb(0, 152, 255);
        border-width:3px;
        border-color:white;
    }
    #buttonA:hover {
        color:rgb(0, 152, 255);
        background-color:white;
        border-width:3px
        border-color:rgb(0, 152, 255);
    }
</style>
</html>

我是这种类型的东西和堆栈溢出的新手,所以如果我没有正确澄清某些事情,请告诉我,提前感谢您的帮助!

里约

单击某个按钮时打开新选项卡的简单代码。尝试在您的扩展程序上使用它。

manifest.json:

{
  "name": "Test",
  "version": "1.1",
  "description":
    "Description",
  "permissions": [
    "notifications",
    "fontSettings"
  ],
  "options_page": "options.html",
  "manifest_version": 2
}

选项.html:

<!doctype html>
<html>
  <head>
    <title>Demo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="options.js"></script>
  </head>
  <body>
    <input type="button" id="btnOpenNewTab" value="Click to open new tab"/>
  </body>
</html>

选项.js:

window.addEventListener('DOMContentLoaded', function() {
    // your button here
    var link = document.getElementById('btnOpenNewTab');
    // onClick's logic below:
    link.addEventListener('click', function() {
        var newURL = "http://stackoverflow.com/";
        chrome.tabs.create({ url: newURL });
    });
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何通过Chrome扩展程序打开mailto:链接?

来自分类Dev

如何通过单击扩展HTML中的图像

来自分类Dev

Chrome扩展程序:webRequest重定向到现有选项卡,而无需打开新选项卡

来自分类Dev

Chrome扩展程序:单击弹出窗口中的按钮时,将文本插入文本字段

来自分类Dev

用户单击浏览器操作并弹出窗口时如何执行操作(Chrome扩展程序)

来自分类Dev

chrome调试器:单击控制台中的异常链接会在新选项卡中打开文件,而不是交叉链接到源文件中

来自分类Dev

如何单击Element()并在同一选项卡中而不是在新窗口中打开链接?

来自分类Dev

如何使用Selenium WebDriver在新选项卡(chrome)中打开链接?

来自分类Dev

Chrome扩展程序可通过单击浏览器操作来创建.html页面。

来自分类Dev

Chrome扩展程序:如何将HTML附加到新创建的chrome标签中?

来自分类Dev

关闭按钮可在Chrome扩展程序弹出窗口中打开新的Chrome存储标签

来自分类Dev

如何缩小Chrome扩展程序的弹出窗口

来自分类Dev

模拟鼠标单击,超链接弹出窗口被阻止,未在选项卡中打开

来自分类Dev

使用鼠标中键单击时,阻止Chrome在同一选项卡中打开锚链接

来自分类Dev

Chrome扩展程序如何响应按钮在页面中的单击?

来自分类Dev

Google Chrome扩展程序在弹出窗口和选项卡之间进行对话

来自分类Dev

Chrome扩展程序:webRequest重定向到现有选项卡,而无需打开新选项卡

来自分类Dev

如何指示Chrome扩展程序在每次打开HTML时都不要重新加载HTML?

来自分类Dev

如何通过单击html页面中的按钮来启动Chrome打包的应用

来自分类Dev

无法使用Chrome扩展程序弹出窗口中的按钮打开新标签页

来自分类Dev

Mac-如何在指定的Chrome窗口中打开新链接?

来自分类Dev

Chrome扩展程序:单击按钮后如何将html表单数据发送到php页面,该页面重定向到该php页面

来自分类Dev

关闭按钮可在Chrome扩展程序弹出窗口中打开新的Chrome存储标签

来自分类Dev

单击HTML按钮时,在新的浏览器选项卡中打开URL

来自分类Dev

如何通过单击Chrome扩展程序图标打开mailto链接?

来自分类Dev

如何在Chrome扩展程序中通过鼠标调整POPUP.html页面的大小

来自分类Dev

Chrome 扩展程序 - 在当前选项卡的 popup.html 中激活脚本

来自分类Dev

单击图像以在 HTML 页面中打开新选项卡

来自分类Dev

使用脚本(按钮)在 HTML 中的新选项卡中打开链接

Related 相关文章

  1. 1

    如何通过Chrome扩展程序打开mailto:链接?

  2. 2

    如何通过单击扩展HTML中的图像

  3. 3

    Chrome扩展程序:webRequest重定向到现有选项卡,而无需打开新选项卡

  4. 4

    Chrome扩展程序:单击弹出窗口中的按钮时,将文本插入文本字段

  5. 5

    用户单击浏览器操作并弹出窗口时如何执行操作(Chrome扩展程序)

  6. 6

    chrome调试器:单击控制台中的异常链接会在新选项卡中打开文件,而不是交叉链接到源文件中

  7. 7

    如何单击Element()并在同一选项卡中而不是在新窗口中打开链接?

  8. 8

    如何使用Selenium WebDriver在新选项卡(chrome)中打开链接?

  9. 9

    Chrome扩展程序可通过单击浏览器操作来创建.html页面。

  10. 10

    Chrome扩展程序:如何将HTML附加到新创建的chrome标签中?

  11. 11

    关闭按钮可在Chrome扩展程序弹出窗口中打开新的Chrome存储标签

  12. 12

    如何缩小Chrome扩展程序的弹出窗口

  13. 13

    模拟鼠标单击,超链接弹出窗口被阻止,未在选项卡中打开

  14. 14

    使用鼠标中键单击时,阻止Chrome在同一选项卡中打开锚链接

  15. 15

    Chrome扩展程序如何响应按钮在页面中的单击?

  16. 16

    Google Chrome扩展程序在弹出窗口和选项卡之间进行对话

  17. 17

    Chrome扩展程序:webRequest重定向到现有选项卡,而无需打开新选项卡

  18. 18

    如何指示Chrome扩展程序在每次打开HTML时都不要重新加载HTML?

  19. 19

    如何通过单击html页面中的按钮来启动Chrome打包的应用

  20. 20

    无法使用Chrome扩展程序弹出窗口中的按钮打开新标签页

  21. 21

    Mac-如何在指定的Chrome窗口中打开新链接?

  22. 22

    Chrome扩展程序:单击按钮后如何将html表单数据发送到php页面,该页面重定向到该php页面

  23. 23

    关闭按钮可在Chrome扩展程序弹出窗口中打开新的Chrome存储标签

  24. 24

    单击HTML按钮时,在新的浏览器选项卡中打开URL

  25. 25

    如何通过单击Chrome扩展程序图标打开mailto链接?

  26. 26

    如何在Chrome扩展程序中通过鼠标调整POPUP.html页面的大小

  27. 27

    Chrome 扩展程序 - 在当前选项卡的 popup.html 中激活脚本

  28. 28

    单击图像以在 HTML 页面中打开新选项卡

  29. 29

    使用脚本(按钮)在 HTML 中的新选项卡中打开链接

热门标签

归档