2016-09-21 75 views
0

我有一個與content_scripts的擴展。當頁面加載我使用jQuery追加新元素DOM在Chrome擴展中使用onClick

urlTarget.parent().prepend("<div class='scout status' onClick='test()' data-domain='" + domainKey + "'></div>");

這工作得很好。我也有我的inject.js內容腳本中定義的函數:

function test() { 
    alert("this is test"); 
    return false; 
} 

我獲得以下錯誤點擊附加元素後:

Uncaught ReferenceError: test is not defined

我一直在閱讀有關在Chrome瀏覽器擴展框架的安全性限制(見docs),但我不確定它們是否也應用於內容腳本(文檔顯示彈出示例),還是我錯過了某些選擇?

回答

1

當您通過onClick=XXX將新元素附加到DOM並註冊事件偵聽器時,實際上瀏覽器預計XXX來自頁面腳本。但是,您知道content scripts are isolated,它們不能直接訪問由頁面創建的變量/函數,反之亦然。

所以在這裏談到兩種解決方法:

  1. 通過以下方式在內容腳本添加id插入的元素,並綁定事件偵聽器

    // Assuming the id is ID 
    document.getElementById('ID').addEventListener('click', test); 
    
  2. 附加一個script標籤成該頁(Insert code into the page context using a content script

    var actualCode = ` 
        function test() { 
        alert("this is test"); 
        return false; 
        } 
    `; 
    
    var script = document.createElement('script'); 
    script.textContent = actualCode; 
    (document.head||document.documentElement).appendChild(script); 
    script.remove(); 
    
+0

感謝您解釋腳本行爲。其實我的目的是從注入腳本內動態調用一個函數。動態地,我的意思是,當處理點擊包含數據屬性值和要調用的函數名稱的附加元素時,我將能夠從「字符串」中調用此函數。我不是'onClick',我也嘗試過'eval()' - 但效果是一樣的。 –