我想做一个扩展来帮助我完成当前的工作，但我一直无法让它工作。为了简化 - 我将发布一个扩展示例的代码，该示例应将 google.com 页面上“我感觉很幸运”按钮的值更改为用户在扩展弹出窗口中输入的自定义值。
问题是，无论我尝试了多少种不同的方法，我都无法访问按钮的值。
扩展包含4个文件：popup.html、popup.js、manifest.json和background.js
manifest.json 文件如下所示：
{
"manifest_version": 3,
"name": "Lucky Button Changer",
"version": "1.0",
"description": "A Chrome extension that allows users to change the value of the 'I'm feeling lucky' button on google.com",
"permissions": ["activeTab"],
"host_permissions": ["https://www.google.com/*"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
}
Popup.html 文件如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Lucky Button Changer</title>
<script src="popup.js"></script>
</head>
<body>
<input type="text" id="luckyValue" placeholder="Enter new value for 'I'm feeling lucky' button">
<button id="changeButton">Change Value</button>
</body>
</html>
Popup.js 文件如下所示：
let luckyButton = document.querySelector(
"#ow6 > div.FPdoLc.lJ9FBc > center > input.RNmpXc"
);
if (luckyButton) {
luckyButton.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
let input = document.getElementById("luckyInput");
let inputValue = input.value;
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: () => {
let luckyButton = document.querySelector(
"#ow6 > div.FPdoLc.lJ9FBc > center > input.RNmpXc"
);
luckyButton.value = inputValue;
},
});
});
} else {
console.log("Could not find lucky button on page.");
}
最后，background.js 文件如下所示：
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: () => {
chrome.action.openPopup();
},
});
});
在 popup.js 文件中，我将代码放在一个 try - catch 块中，只是为了看看我是否会获取该元素，因为这是我一直遇到的主要问题。结果，我得到“在页面上找不到幸运按钮”。打印在控制台中，因为我无法获得按钮的值。我已经为这个问题苦苦思索了太久，所以我希望有扩展经验的人可以帮助我解决这个问题，让这个例子起作用，这样我就可以将逻辑应用到我的实际项目中。谢谢！