如何從Chrome擴展彈出式菜單中打開新選項卡

我是鉻擴展的新手。我已經嘗試過創建擴展的第一個示例練習。現在我正試圖在擴展彈出窗口的新選項卡中打開一個URL。只是我在popup.html頁面添加了一個HTML定位標記。如何從Chrome擴展彈出式菜單中打開新選項卡

a href="www.google.com">Click</a>

但它沒有開放。它試圖在彈出窗口中使用以下URL打開URL。

鉻擴展：//ljamgfaclheagbikmcagffcbdbcoodna/www.google.com

我popup.html有這個代碼。

<!doctype html> 
<html> 
    <head> 
    <title>Getting Started Extension's Popup</title> 
    <style> 
    </style> 
    <!-- JavaScript and HTML must be in separate files for security. --> 
    </head> 
    <body> 
    <b>Karthick</b> 
    <a href="www.google.com">Click</a> 
    </body> 
</html>

而且我的manifest.json有以下JSON

{ 
    "name": "Test Extension", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "The first extension for my test", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "tabs" 
    ] 
}

我沒有寫在popup.js 我搜索了它是如何做任何事情。但他們說我必須使用以下內容。

chrome.tabs.getSelected({}, function(tab) { 
    chrome.tabs.update(tab.id, {url: 'http://google.com'}); 
});

但我不知道正確的方法/在哪裏做到這一點。請告訴我要做的步驟。在此先感謝。

來源

2012-10-31 flykarthick

您可以爲該鏈接添加一個onclick監聽器。

var link = document.getElementById("link"); 
link.addEventListener("click", function(){ 
    chrome.tabs.getSelected({}, function(tab) { 
    chrome.tabs.update(tab.id, {url: 'http://google.com'}); 
    }); 
}, false);

但是我會使用chrome.tabs.create()函數。

來源

2012-10-31 10:14:38

它不工作...任何許可相關的東西...任何我想包括我已經錯過的... – flykarthick

你有沒有添加一個類或id標籤的JavaScript代碼中匹配這個元素？例如'Open' –

這裏是解決方案，只是將下面的代碼添加到popup.js：

$(function() { 
    $('#s').click(function() { 
    chrome.tabs.create({url: 'http://www.google.com'}); 
    }); 
}); 

document.addEventListener('DOMContentLoaded');

，並更新你的錨標記，看起來像這樣：因爲我們使用jQuery選擇

<a id="s" href="www.google.com">Click</a>

更新您的popup.html到：

<!doctype html> 
<html> 
    <head> 
    <style> 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    <b>Karthick</b> 
    <a href="www.google.com">Click</a> 
    </body> 
</html>

並允許popup.html中的jquery更新您的清單看起來像這樣：

{ 
    "name": "Test Extension", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "The first extension for my test", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "tabs" 
    ], //<<--- do not miss this "," 
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'" 
}

如果這不起作用，讓我給你這個crx。乾杯！

來源

2013-07-18 14:31:24 whizzzkid

我會檢查並通知您 – flykarthick

Easy.在popup.html將這個：

<a href='google.com' target='_newtab'>Click</a>

或者把這個JS文件：

window.open('http://google.com','_newtab');

來源

2015-03-23 02:02:15 jkdev

您也可以嘗試使用「_blank」而不是「_newtab」。 – jkdev

或jQuery。 [這真的很棒，可以做所有事情。]（http://4.bp.blogspot.com/-Hk1mt-RKYLc/UOkxShm6NrI/AAAAAAAACqo/LVmqHOfWV7g/s1600/20091116-so-large.gif） – jkdev

如何從Chrome擴展彈出式菜單中打開新選項卡

回答

相關問題