Google chrome擴展：主網頁中的dispatchevent

Question

我在我的擴展內容腳本中。從內容腳本中，我嘗試在主網頁上發送事件。但事件沒有發送，什麼都沒有。爲進一步明確我分派事件中的所有元素=）

$('*').each(function(i, entity){ 
    console.log(entity); 
    $(entity).trigger('mouseenter'); 
}); 

從這個article，我發現擴展範圍有限和主網頁腳本變量的訪問權限。

但是我可以在擴展內容腳本的主頁面觸發元素事件嗎？

對不起，我的英文不好！

Answer 1

如果事件監聽器是在網頁的上下文中定義的（但不是在內容腳本上），則從內容觸發的'mouseenter'將不會被處理。發生這種情況是因爲內容腳本生活在isolated world中。

要實現正確的觸發，您需要將JavaScript直接插入到網頁上下文中。您有以下選擇：

選項1：簡單的用內聯JavaScript

插入代碼爲<script></script>標籤，並把它添加到文檔：

var script = "$('*').each(function(i, entity){\ 
    console.log(entity);\ 
    $(entity).trigger('mouseenter');\ 
});"; 

var scriptElement = document.createElement("script"); 
scriptElement.innerHTML = script; 

document.head.appendChild(scriptElement); 

方案2：通過Web訪問JavaScript文件

當注入的腳本有很多代碼時，此方法非常有用。

用以下內容創建的擴展根目錄中的文件，例如inject.js：

$('*').each(function(i, entity){ 
    console.log(entity); 
    $(entity).trigger('mouseenter'); 
}); 

修改manifest.json使其web accessible：

{ 
    "web_accessible_resources": ["inject.js"] 
} 

而且在內容腳本創建<script/>標記，參考inject.js：

var scriptElement = document.createElement("script"); 
scriptElement.setAttribute('src', chrome.runtime.getURL('inject.js')); 
document.head.appendChild(scriptElement);