Chrome擴展 - JS功能無法識別

我是鉻擴展開發新手。我試圖建立一個非常基本的擴展，只是爲了看看事情是如何工作的。Chrome擴展 - JS功能無法識別

我想要構建的擴展需要在網頁中添加一個按鈕以及所有「h1」元素。

這是我的js文件：

function myFunction(element) { 
    alert(element.innerText); 
}; 


var elements = document.querySelectorAll("h1"); 

for (var i = 0; i < elements.length; i++) 
{ 
    var element = elements[i]; 
    // element.innerHTML += "<form><button type='button' value='Copy' onclick='myfunction(element)'></form>"; 
    element.innerHTML += "<button onclick='myFunction()'>Click me</button>"; 
};

當我按一下按鈕沒有任何反應，似乎「myFunction的」不被認可。

這是我的清單：

{ 
    "manifest_version": 2, 

    "name": "MagiCopy", 
    "description": "This extension shows a Google Image search result for the current page", 
    "version": "1.0", 

    "browser_action": 
    { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "chrome_url_overrides": 
    { 
    "newtab" : "newtab.html" 
    }, 

    "background": 
    { 
    "scripts": ["background.js"] 
    }, 

    "permissions": 
    [ 
    "activeTab", 
    "https://ajax.googleapis.com/" 
    ], 

    "content_scripts": 
    [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js": ["myscript.js"], 
     "run_at" : "document_end" 
    } 
    ] 
}

我在做什麼錯？

來源

2016-05-08 Dan

無參數顯示要傳遞給'myFunction'提醒？嘗試在'document'處定義或追加'myFunction'而不是擴展名'background.js'頁面 – guest271314

這裏有很多問題，但讓我們從最重要的一個開始。

Chrome擴展程序的內容腳本生效in an isolated environment。

內容腳本在稱爲孤立世界的特殊環境中執行。他們可以訪問他們注入的頁面的DOM，但不能訪問頁面創建的任何JavaScript變量或函數。它會查看每個內容腳本，就好像其上運行的頁面上沒有執行其他JavaScript一樣。反過來也是如此：頁面上運行的JavaScript不能調用任何函數或訪問由內容腳本定義的任何變量。

當您創建一個附帶內聯代碼的元素（onclick作爲元素的參數）時，該代碼位於頁面的上下文中。

由於上下文與您的內容腳本隔離，因此未在其中定義myFunction。

在此處執行此操作的正確方法是完全避免內聯腳本，並使用addEventListener附加偵聽器。

這就是說，下一個問題：你正在操縱innerHTML添加DOM。這是一個thoroughly bad idea，因爲你可能會破壞狀態信息。

這裏是element.innerHTML += "something"做：

轉換element的內容轉換爲字符串表示DOM節點。這會丟棄隨後附加到DOM節點的所有內容 - 例如事件監聽器。
將「something」添加到該字符串中。
捨棄element中的所有DOM節點。
用結果字符串生成的DOM替換element的內容。

不要潛在地摧毀別人的（或你自己的）工作。使用不通過轉換爲字符串的適當的DOM操作：創建一個節點，並將其插入（追加）到您想要的節點。

var button = document.createElement("button"); 
button.text = "Click me"; 
button.addEventListener("click", myFunction); 
element.appendChild(button);

最後，你還指望由於某些原因element將傳遞給myFunction。事件偵聽器確實收到一個參數，但是它是Event對象。您可以使用它target屬性，或者，如果我沒有記錯，甚至this在監聽器裏：

function myFunction(e) { // e is the event 
    console.log(e.target); 
    console.log(this); 
}

來源

2016-05-08 11:13:21 Xan

Chrome擴展 - JS功能無法識別

回答

相關問題