我正在制作一個自動填充鍍鉻擴展。即，一旦按下按鈕，內容網頁中的輸入表單將被 popup.html 中的文本填充。我收到此“無法讀取 null 屬性”錯誤，從我向按鈕添加事件偵聽器的位置開始。[未捕獲的型別錯誤：無法讀取 null 的屬性（讀取“addEventListener”）][1]
這是我的 html 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Autofill</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="testText">Text to put</p>
<button id="fillForm">Fill!</button>
<script src="app.js" ></script>
</body>
</html>
這是我的 app.js
console.log('background running!!!')
let testtext = document.getElementById('testText')
let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);
function buttonClick(){
params = {
active: true,
currentWindow: true
}
chrome.tabs.query(params, gotTabs);
function gotTabs(tabs){
let text = testtext.innerHTML
let content = {
username: text
}
chrome.tabs.sendMessage(tabs[0].id, content);
}
}
這是我的 content.js
console.log("Receiving message...")
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendReponse){
document.getElementById('email').value = content.username
}
最后，我的 manifest.json
{
"name": "Resume Autofiller",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 2,
"browser_action":{
"default_popup": "index.html"
},
"permissions": [
"activeTab",
"<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [ "content.js" ]
}
],
"background": {
"scripts": ["app.js"]
}
}
我在網上讀到我應該把我的腳本標簽放在 body 標簽的底部，但我仍然收到這個錯誤。我覺得我正在監督一些明顯的事情，因此非常感謝任何幫助。謝謝！！附件是我得到的錯誤。[1]：https : //i.stack.imgur.com/GyNXO.png
uj5u.com熱心網友回復：
如前所述，從清單中洗掉背景將解決此問題，但代碼示例中似乎存在概念上的混淆，這就是為什么我想解釋為什么此解決方案有效。
名為 app.js 的腳本似乎旨在作為彈出腳本，但在示例中用作后臺腳本。彈出視窗與背景不同。這將有助于理解這兩個擴展部分及其用例之間的區別。為了連貫性，以下解釋將參考 MV3 版本和術語。
背景： “后臺服務作業者在需要時加載，空閑時卸載 [...] 圍繞擴展所依賴的事件構建后臺腳本。定義功能相關的事件允許后臺腳本處于休眠狀態，直到這些事件被觸發并防止擴展丟失重要的觸發器。” （與服務人員一起管理事件）附加說明：背景實際上是在背景中；沒有可見的用戶界面。用戶不會在后臺與按鈕互動（盡管可以將事件發送到后臺以通過訊息傳遞進行進一步處理）。將背景視為單身人士。
彈出視窗：這是為擴展用戶提供 UI 的可能位置之一。彈出視窗由用戶單擊擴展圖示激活，并在彈出視窗失去焦點時銷毀（包括選項卡關閉時），并在用戶下次單擊圖示時重新加載。“與后臺腳本一樣，此檔案必須在清單中宣告，以便 Chrome 在擴展程式的彈出視窗中顯示它。為此，向清單添加一個操作物件并將 popup.html 設定為操作的 default_popup。” （介紹一個用戶界面）。在彈出視窗中，您可以添加按鈕和其他元素供用戶單擊。彈出視窗特定于每個選項卡。打開多個瀏覽器視窗，點擊圖示，可以同時打開多個彈窗。
簡而言之：錯誤來自在后臺尋找按鈕元素，當沒有這樣的按鈕時；洗掉清單鍵將阻止這種情況。
最小作業示例
manifest.json：background鍵已洗掉
{
"name": "Resume Autofiller",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 2,
"browser_action":{
"default_popup": "index.html"
},
"permissions": [
"activeTab",
"<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [ "content.js" ]
}
]
}
index.html : 沒有變化
（style.css 會引發 not found 錯誤，但不關心這個問題）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Autofill</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="testText">Text to put</p>
<button id="fillForm">Fill!</button>
<script src="app.js" ></script>
</body>
</html>
app.js：更改日志文本，無重大變化
console.log('popup running!!!')
let testtext = document.getElementById('testText')
let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);
function buttonClick(){
params = {
active: true,
currentWindow: true
}
chrome.tabs.query(params, gotTabs);
function gotTabs(tabs){
let text = testtext.innerHTML
let content = {
username: text
}
chrome.tabs.sendMessage(tabs[0].id, content);
}
}
content.js：更改日志輸出一點，注釋掉賦值
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse){
console.log("Receiving message...")
console.log('message', JSON.stringify(message));
// next line has undefined references, commenting out
// document.getElementById('email').value = content.username
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/363593.html
標籤：javascript html dom 谷歌浏览器扩展 添加事件监听器