如何在 Chrome 扩展中获取 javascript 中的 HTML 元素

Question

已更新

我想使用 Javascript 在 chrome 扩展中获取当前选项卡 (url ) 的特定 html 元素的值。喜欢

document.getElementById("productTitle").value;

这是我的 javascript 代码

background.js

function sendCurrentTitle(title) {
  var req = new XMLHttpRequest();
  req.addEventListener('readystatechange', function (evt) {
    if (req.readyState === 4) {
      if (req.status === 200) {
        alert('Saved !');
      } else {
        alert("ERROR: status " + req.status);
      }
    }
  });
  req.open('POST', 'http://url/a.php', true);
  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  req.send('url=' + title);
}

chrome.browserAction.onClicked.addListener(function (tab) {
  
chrome.tabs.query({active: true}, function(tabs) {
      sendCurrentTitle(document.getElementById("productTitle").value);
});


});

manifest.json

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.0",

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

"browser_action": {},

  "permissions": [
    "activeTab",
    "tabs", 
    "<all_urls>"
  ]
}

我想从 this 页面获取产品标题并将其发送到 php api。我收到此错误

Error handling response: TypeError: Cannot read property 'value' of null

Answer 1

你可以得到一个带有查询选择器的 html 元素或 DOM:-

document.querySelector(element);
document.getElementByID(elementID);
document.getElementByClassName(className);

或者你也可以通过onclick属性来实现：-

<button onclick="fun"></button>
<script>
      function(fun){
      
      }
</script>

Answer 2

您的扩展脚本在单独的 window 中运行，因此它无法通过自己的文档对象访问 DOM 其他页面。您需要在扩展清单中指定选项卡权限，并将一些 javascript 注入页面本身

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(tab.id,{code:   `document.getElementById("productTitle").innerText`},sendCurrentTitle);
});

请注意，您需要在 sendCurrentTitle 中使用 title[0]，因为回调会收到一个数组

Answer 3

获取 DOM 内容的最佳方式是使用内容脚本 https://developer.chrome.com/extensions/content_scripts

如何在 Chrome 扩展中获取 javascript 中的 HTML 元素

How to get HTML element in javascript in Chrome Extension

javascript

google-chrome-extension