Chrome拡張機能：htmlポップアップでボタンをクリックすると、新しいタブで指定したリンクを開く方法を教えてください。

私は、クロムエクステンションを作成しているプールの水に足を浸しています。私はシンプルだと思ったものから始めようとしましたが、この種の情報をどこで読むことができるかわからないので、私には悩まされていました。Chrome拡張機能：htmlポップアップでボタンをクリックすると、新しいタブで指定したリンクを開く方法を教えてください。

とにかく、現在、私の目標は、次のないChromeの拡張機能させることです。あなたは拡張機能のアイコンをクリックする - > HTMLポップアップファイルは、特異ボタンが表示さ開きます - >あなたは、このボタンをクリックしたとき、それはで指定されたリンクを開きます新しいクロムタブがアクティブなタブに変更されます。

私の検索から、私がマニフェストバージョン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-click-a-toolbar-icon – Rio

リンクは非常に高く評価されています。スニペットをどのように変更するのかを教えてください。 '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

リオさん、ありがとうございました。私がこれを理解するのを手伝ってくれてありがとうございました。これはシームレスに動作し、私の前進に役立ちます。 – 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ポップアップでボタンをクリックすると、新しいタブで指定したリンクを開く方法を教えてください。

答えて

関連する問題