Chome擴展：如何改變頁面內按鈕的行爲？

我很確定這是一個愚蠢的問題，但我正在努力尋找一個有用的答案。Chome擴展：如何改變頁面內按鈕的行爲？

我想捕捉當用戶在Google日曆中創建新事件來執行某些操作。所以我想象我可以通過修改「創建」按鈕的行爲來做到這一點。

使用jQuery獲取按鈕並添加事件偵聽器將是一個很好的做法嗎？我不是完全使用這種方法，因爲舒適

按鈕的HTML將來可能
發生更改日曆是一個單頁應用程序，我不知道正確的時刻搜索DOM中的按鈕

在此先感謝！

2016-09-06 daymannovaes

聆聽URL哈希變化（'Create'頁面使用'＃eventpage_6'）可能會更可靠，請參閱[Chrome擴展檢測Google搜索刷新]的第二部分（https://stackoverflow.com/a/39288755） – wOxxOm

如果您想更改按鈕的行爲，您需要注入一個內容腳本，該腳本可在當前處理程序之前訪問按鈕上的事件。你怎麼做到這一點，你需要攔截的事件會因情況而異。

對於按鈕，您需要攔截的最有可能的事件是click，但您可能需要攔截其他事件，例如mousedown或mouseup。

對於其他類型的輸入元素，當然還有其他多種可能的事件。例如，Stack Exchange監聽input,keydown和keypress事件以獲取textareas中的輸入。

唯一的辦法實際上是決定了你需要攔截是

實驗的事件：嘗試最有可能的事件或事件的組合，看看會發生什麼，或
看代碼爲該頁面確定處理程序所附加的事件。

很明顯，你可能會選擇使用stopImmediatePropagation()，stopPropagation()，和/或preventDefault()防止現有的事件處理程序被調用。

按鈕的HTML將來可能

至於你關注的是，頁面的HTML可以改變改變：是的，它可能。這可能會破壞你的擴展。您將需要更新您的擴展。如果您可以確定頁面代碼使用的確切選擇器，則可以嘗試使用相同的選擇器。這些是最不可能改變的事情，因爲它需要網頁的設計者也改變他們的代碼。但是，最終，你只能忍受HTML可能會改變的事實。雖然您可以嘗試減輕此類更改可能產生的影響，但您無法完全刪除對嘗試與之交互的頁面的HTML依賴關係。

當日歷是一個單頁應用程序，我不知道正確的時刻搜索按鈕，在DOM

正確的時間搜索按鈕，在DOM將取決於在您嘗試與之對接的特定頁面上。有多種潛在事件可用於確定何時添加事件處理程序，這些事件處理程序至少包括DOMContentLoaded,load和readystatechange。但是，您可以選擇在發生click或其他事件時進行此搜索。這需要更多的CPU資源，所以建議只有這樣才能找到想要觀看的元素（即一旦找到，記住元素）。

在加載任何頁面內容之前，甚至有必要將主偵聽器添加到window。當頁面的偵聽器連接到window時，可能需要這樣做。首先添加的處理程序首先被調用。作爲擴展，您可以選擇確保您的內容腳本在加載任何頁面內容之前運行。這樣做可以讓您確定您的處理程序首先被調用。

其實攔截事件：
你的目標是之前這是在網頁中的腳本處理程序已經叫你的處理器。不知道事件監聽器實際放置在哪個元素上（它可能位於元素的任何祖先或元素本身），並且如果將其放置在Capture, Target, or Bubbling phase上，則可以使其最有可能使您的處理程序首先稱之爲將其放在Capture階段的window上。您可能需要在加載任何內容之前先運行腳本，以便您的處理程序是第一個添加到該類型事件的window的處理程序。但是，確保在加載任何內容之前運行通常不是必需的。

對於您感興趣的具體情況，Google日曆中的「創建」按鈕，包含按鈕的<div>的ID爲createEventButtonContainer。因此，你可以這樣做（你不能使用jQuery，因爲它不僅會冒泡階段）：

//The following will catch the event prior to almost all other possible 
// event handlers. 
var createEventButtonContainerEl; 
window.addEventListener('click',function(e){ 
    if(!createEventButtonContainerEl){ 
     //If we have not previously found the create event button container, try to find it. 
     createEventButtonContainerEl=document.getElementById('createEventButtonContainer'); 
    } 
    if(createEventButtonContainerEl && createEventButtonContainerEl.contains(e.target)){ 
     //The elements we are interested in 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     //You may want to further determine which part of the `createEventButtonContainer` 
     // was clicked as different parts have different functions. 
    } 
}

來源

2016-09-11 01:05:50 Makyen

-1

您可以通過jQuery中的$()函數獲取按鈕。要獲得按鈕，他們沒有任何100％的保證。並在頁面加載結束時添加一個事件監聽器。所以你確定整個頁面被加載。

來源

2016-09-06 14:16:17 Fralec

此通用信息未解決問題中列出的主要問題，而不是「如何使用jQuery'。 – wOxxOm

Chome擴展：如何改變頁面內按鈕的行爲？

回答

相關問題