Chrome浏览器扩展程序：如何通过点击html弹出框中的按钮来打开新标签页中的指定链接？

我正在尝试将我的脚浸入创建镀铬扩展的池中。我试图从我认为简单的事情开始，但事实证明，我不知道我在哪里可以阅读有关这方面的信息。Chrome浏览器扩展程序：如何通过点击html弹出框中的按钮来打开新标签页中的指定链接？

无论如何，目前我的目标是有一个扩展名为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> 
 
\t <script> 
 
\t var button1 = document.getElementById("buttonA"); 
 
\t button1.addEventListener("click", function() { 
 
    chrome.tabs.create({url: "http://www.google.com/"}); 
 
\t }); 
 
\t </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>

我是新来的这种类型的东西，堆栈溢出一般，所以如果我不澄清一些正确只是让我知道，谢谢你的帮助提前！

来源

2017-03-01 Cyclicz

检查这个问题http://stackoverflow.com/questions/3188384/google-chrome-extensions-open-new-tab-when-clicking-a-toolbar-icon – Rio

链接非常感谢@Rio，虽然我不是很喜欢s我将如何更改片段'chrome.browserAction.onClicked.addListener（function（activeTab） { var newURL =“http://www.google.com/”; chrome.tabs.create（{url：newURL}）; }）;'在popup.html中使用我的按钮。我开始认为我可能需要一个后台脚本来监听按钮推送的背景。 – Cyclicz

一个简单的代码来打开点击按钮的一些新的标签。尝试在你的扩展上使用它。

manifest.json的：

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

option.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>

option.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 }); 
    }); 
});

来源

2017-03-02 02:31:38 Rio

非常感谢Rio，帮助我解决这个问题，它可以无缝工作，并且能够帮助我继续前进。 – Cyclicz

您可以使用此源代码弹出式窗口的按钮

window.opener.open("http://www.google.com/");

来源

2017-03-01 03:06:33

我很感激你给我的帮助，虽然你提供的源代码我相信是用来打开一个新窗口，而不是一个新标签页。 – Cyclicz

我也在这里看到这篇文章：http://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript？ rq = 1，表示可能无法在JavaScript中的新选项卡中打开链接，并指出其所有浏览器首选项。 – Cyclicz

Chrome浏览器扩展程序：如何通过点击html弹出框中的按钮来打开新标签页中的指定链接？

回答

相关问题