Warm tip: This article is reproduced from serverfault.com, please click

其他-如何在Chrome扩展程序中的JavaScript中获取HTML元素

(其他 - How to get HTML element in javascript in Chrome Extension)

发布于 2020-11-29 15:01:29

更新

我想使用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>"
  ]
}

我想从产品称号页面,并将其发送到PHP API。我收到此错误

错误处理响应:TypeError:无法读取null的属性“值”

Questioner
zileia
Viewed
0
Nadia Chibrikova 2020-11-30 02:02:48

你的扩展脚本在单独的窗口中运行,因此它无法通过自己的文档对象访问其他页面的DOM。你需要在扩展程序清单中指定tabs权限,并将一些javascript注入页面本身

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

请不要在回调函数接收到数组的同时,在sendCurrentTitle中使用title [0]