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彈出框中的按鈕來打開新標籤頁中的指定鏈接？

回答

相關問題