2017-04-20 211 views
0

我需要在點擊Chrome擴展程序圖標時獲取當前選項卡的源代碼。我也試着用按鈕點擊事件。請通過我當前的代碼:Chrome擴展程序:獲取活動標籤的源代碼

的manifest.json

{ "name": "UM Chrome Extension!", "version": "1.0", 
    "description": "To ensure the tracking codes present.", 
    "icons": { 
"128": "TW-Extension-Icon2.png" 
}, "background": { 
     "scripts": [ "background.js"] 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*"], 
     "js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"] 
    } 
    ], 
    "permissions": [ 
    "activeTab","tabs","contextMenus", "http://*/*" 
    ], 

    "browser_action": { 
    "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
} 

popup.html

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <script type="text/javascript" src="popup1.js"></script> 
    </head> 

    <body style="width: 600px; height: 300px;"> 
<button value="Test" id="check-1"> </button> 
</body> 
</html> 

和popup.js

window.addEventListener('DOMContentLoaded', function() { 
var fbshare = document.querySelector('#check-1'); 
    fbshare.addEventListener('click', function() { 
     var htmlCode = document.documentElement.outerHTML; 
    window.alert(htmlCode); 
     }); 

}); 

如何獲得激活的標籤的源代碼?我需要獲取頁面的源代碼,以便我需要搜索頁面是否包含特定的跟蹤代碼(如GA代碼)。

謝謝

+0

請定義「源代碼」。你的意思是HTML嗎?腳本? CSS? – Makyen

+0

您正在爲popup或作爲內容腳本加載* popup1.js *。這幾乎總是一個壞主意™。你應該只加載它作爲一個或另一個。除了庫之外的任何腳本文件在這兩者之間共享是非常罕見的。 – Makyen

+0

*請不要將jQuery,jQueryUI和BootStrap加載到每個**頁面('content_scripts'和''matches''),除非**需要**。 jQuery本身就是最小化代碼的85kB。這是放置在每一頁上的重要負擔。我們這些擁有100個標籤的人是什麼意思?雖然有可能你真的需要*加載所有這些庫,但你應該加載所需的絕對最小*,以允許用戶開始與你的擴展進行交互(例如靜態圖像和事件處理程序W/O庫),然後動態加載一旦用戶實際與您的擴展進行交互,所有內容 – Makyen

回答

3

您的清單既有"content_scripts""browser_action"腳本(點擊擴展菜單按鈕時,在一個孤立的背景下,其運行)(在頁面上document_idle的上下文中運行)。

popup.html您引用popup.js,所以在popup.js當你調用document.documentElement.outerHTML你得到的popup.html內容,不激活的標籤。

您參考popup.jspopup1.js,這是混淆。您目前在彈出窗口和頁面上下文中都運行相同的代碼,這幾乎可以保證在其中一個或另一箇中斷。按照慣例,在"content_scripts"中使用content.js並且在動作popup.html中使用參考popup.js

"content_scripts"運行在每隔頁面,無論用戶是否點擊擴展名。您目前的清單是每頁面添加["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]頁面,這是不必要的緩慢。

避免在Chrome擴展中使用jQuery。這是相當大的,並且當您確信所有用戶都在Chrome上時,瀏覽器標準化庫不會添加太多內容。如果你不能編碼沒有它,然後嘗試限制它只是你的彈出或動態加載它。

您設置了一個"scripts": [ "background.js"],它在後臺不斷運行,在當前代碼中根本不需要。如果您需要在操作按鈕之外執行操作,請考慮使用event pages代替。

使用Chrome API從彈出窗口中獲取頁面。您需要query chrome.tabs才能獲得活動選項卡,然後撥打chrome.tabs.executeScript以在該選項卡的上下文中執行腳本。

Google的API使用回調函數,但在本例中,我將使用chrome-extension-async來允許使用promise(還有其他庫也可以這樣做)。

popup.html(假設你使用bower install chrome-extension-async):

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script> 
    <script type="text/javascript" src="popup.js"></script> 
</head> 

<body style="width: 600px; height: 300px;"> 
    <button value="Test" id="check-1"> </button> 
</body> 
</html> 

popup.js(丟棄popup1.js):

function scrapeThePage() { 
    // Keep this function isolated - it can only call methods you set up in content scripts 
    var htmlCode = document.documentElement.outerHTML; 
    return htmlCode; 
} 

document.addEventListener('DOMContentLoaded',() => { 
    // Hook up #check-1 button in popup.html 
    const fbshare = document.querySelector('#check-1'); 
    fbshare.addEventListener('click', async() => { 
     // Get the active tab 
     const tabs = await chrome.tabs.query({ active: true, currentWindow: true }); 
     const tab = tabs[0]; 

     // We have to convert the function to a string 
     const scriptToExec = `(${scrapeThePage})()`; 

     // Run the script in the context of the tab 
     const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec }); 

     // Result will be an array of values from the execution 
     // For testing this will be the same as the console output if you ran scriptToExec in the console 
     alert(scraped[0]); 
    }); 
}); 

如果你這樣說,你不需要任何manifest.json"content_scripts"。你不需要jQuery或jQuery UI或Bootstrap。

+0

謝謝基思! 你的代碼非常有幫助:) – ForTW

+0

@ForTW歡呼聲。如果這回答你的問題,請點擊左邊的綠色勾號選擇它作爲答案。如果沒有,請讓我知道你還需要什麼。 – Keith

相關問題