Chrome擴展程序捕獲中間點擊並替換URL

我完全不熟悉Chrome擴展程序，但已閱讀入門知識並彙集了Google的示例。我希望構建一個擴展，它在活動時捕獲mydomain.com上的鼠標中點擊事件，讀取URL，修改它並使用新創建的URL啓動新標籤。Chrome擴展程序捕獲中間點擊並替換URL

從我瞭解到目前爲止，我需要一個manifest.json文件和my_script.js文件，將被注入所有mydomain.com頁面加載。它是否正確？如果是，我應該如何繼續下一步，我應該添加到我的清單和JavaScript文件來完成給定的任務。一些代碼示例將不勝感激。

我也讀過一個couple of answers這裏在stackoverflow和如果browserAction將被使用它只能用於擴展頁面，所以你不能在內容腳本中使用它。這意味着我將不得不將我的代碼放在後臺頁面而不是my_script.js中。請諮詢我應該如何繼續。

謝謝

工作腳本的解決方案是：

$(document).click(function(e) { 
    var urlToGo = window.location.href; 

    // middle button 
    if (e.which == 2) { 
     urlToGo = "http://google.com"; 
     window.open(urlToGo);  
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
});

來源

2012-11-07 Florin C.

你可以用我的簡單的Chrome擴展程序內容腳本骷髏https://github.com/robin-drexler/Simple-Chrome-Extension-Content-Script-Skeleton，它提供了一個清單和內容腳本開始，那將是對執行你訪問的每一頁。

現在，您可以繼續實施您所需的功能。然後，您可以使用windowwind.open打開一個新的標籤頁/窗口（更簡單的方法），或者使用本地Chrome API打開一個新標籤頁。

window.open（以內容腳本）

$(function() { 
     $(document).on('click', function(e){ 
      //do some replace magic here 
      var url = 'http://google.com'; 
      if (e.which === 2) { 
       window.open(url);  
      }   
     }); 
    });

http://jsfiddle.net/886jY/2/

趣聞Chrome瀏覽器的API

消息之間的背景頁面和內容腳本。 IIRC你只能在後臺頁面使用CHrome Tab API。 http://developer.chrome.com/extensions/messaging.html

Chrome標籤API http://developer.chrome.com/extensions/tabs.html

來源

2012-11-07 12:47:04

我越來越控制檯這個錯誤，當我達到我的頁面和腳本加載：'未捕獲的ReferenceError：$沒有定義'，我不得到新的選項卡與設置'url' –

所以我想我還需要jQuery的這個工作，添加jquery，它現在打開新標籤，但也打開原來的，有沒有辦法我可以壓制原來的？ –

發現解決方案爲preventDefault（）。 –

您必須在manifest.json聲明內容腳本，它們是會爲每個頁面中運行（並遞歸到文檔中每一幀js文件，如果你設置屬性爲「all_frames」爲true）。

檢查該樣本的manifest.json：

{ 
    "name": "MyExtension", 
    "version": "0.2", 
    "manifest_version": 2, 
    "description": "My description.", 
    "content_scripts": [ 
    { 
    "matches": ["<all_urls>"], 
    "js": ["jquery.js", "my_javascript_to_execute_on_each_frame.js"], 
    "all_frames": true 
    } 
    ] 
}

有了這個清單，你就必須提供的jQuery（可選），並用代碼來監聽鼠標點擊一個js文件，改變當前文檔的網址並打開一個新標籤。該腳本可以像這樣的事情：

$(document).click(function(e) { 
    var urlToGo = window.location.href; 

    // middle button 
    if (e.which === 2) { 
     urlToGo = ... // do your url hackery =) 
     window.open(urlToGo);  
     e.stopPropagation(); 
    } 

});

來源

2012-11-07 13:06:09 fegemo

'chrome.tabs'不能從內容腳本訪問。 – Stan

嘿，你是對的！我剛剛在這裏覈實。我也改變了答案，以便正確。感謝您指出！ – fegemo

@fegemo我想你的解決方案，從清單中刪除的jquery.js，但是當我加載頁面我得到這個控制檯'未捕獲的ReferenceError：$沒有定義'，這是my_script.js行1，有什麼我可以做？此外，tripple「===」是一個錯字？ –

就像一個小側面說明，它可能是不是中間的按鈕是一個好主意，因爲它是最多餘的，最不經常使用的用戶，甚至可能會丟失在某些設備上，特別是在觸摸屏上。您應該重新考慮您的方法，以支持使用第一個鼠標按鈕，該按鈕可以通過您自己提及的瀏覽器操作按鈕爲您的extinsion啓用或禁用，或者更好 - 頁面操作按鈕，因爲您想要只能使用特定的域名。

至於你感興趣的代碼（中間的按鈕），它有什麼特別的擴展，它只是一個平常的JavaScript與頁面的DOM，你的內容腳本注入工作。例如，你可以綁定你的處理程序點擊這樣的事情：

document.onmousedown = mouseDown; 

function mouseDown(e) 
{ 
    var midclick; 
    if (!e) var e = window.event; 
    if (e.which) midclick = (e.which == 2); 
    else if (e.button) midclick = (e.button == 4); // MS 
    if (midclick) 
    { 
    var target; 
    if (e.target) target = e.target; 
    else if (e.srcElement) target = e.srcElement; 
    if (target.innerHTML) // do stuff what you need here, 
    {      // assume get all the content as url 
     openNewURL(target.innerHTML); 
    } 
    } 
} 

function openNewURL(newurl) 
{ 
    chrome.extension.sendMessage({url: newurl}, function(response) {}); 
}

你的第一個理解是正確的：你需要的清單和內容腳本，背景頁。

在後臺頁面處理傳入的請求：

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) 
{ 
    if (request.url) 
    { 
    chrome.tabs.create({url: request.url}); 
    } 
});

來源

2012-11-07 13:13:00 Stan

Chrome擴展程序捕獲中間點擊並替換URL

回答

相關問題