Question

我正在尝试构建Chrome扩展程序，每3秒自动点击一次按钮。

这是我的manifest.json文件：

{
    "manifest_version": 2,

    "name": "Clicker",
    "description": "My Clicker",
    "version": "1.0",

    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["background.js", "arrive.min.js"]
        }
    ],

    "browser_action": {
        "default_icon": "favicon.ico",
        "default_popup": "popup.html"
    },
    "permissions": ["activeTab", "tabs"]
}

这是我的background.js文件：

function myFunc() {
	document.getElementById('hello').click();
};

setInterval(myFunc, 3000);

这是我正在尝试使用的页面：

<button id="hello" onclick="javascript:alert('hello')">Ciao a tutti</button>

不幸的是，Chrome给了我这个错误：未捕获TypeError：无法读取属性'click'of null

为什么这不起作用？

Answer 1

您可能尝试在dom中存在之前访问该元素。我确信像onload这样的东西可以帮助解决这个问题，但是由于现代第三方网站不断重新绘制dom，所以当你去寻找它时，你永远不知道该元素是否准备就绪。我喜欢设置一些助手来轮询指定时间内所需的元素。以下这两个文件是一个完整的工作扩展程序，可在您访问favorite tag主页时自动点击您的第一个stackoverflow.com。

编辑：当我第一次发布此内容时，我在匹配项中添加了“https://stackoverflow.com/questions”，但我删除了它，因为它太难以访问未标记为收藏标记的问题。

的manifest.json

{
  "name": "my-favorite",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Click favorite tag",
  "homepage_url": "https://github.com/skylize",
  "content_scripts": [
    {
      "matches": [
        "https://stackoverflow.com/"
      ],
      "js": ["favorite.js"]
    }
  ]
}

favorite.js

// Helper to promisify waiting with setTimeout
//
function delay (time, ...args){
  return new Promise( resolve=>
    // |0 is just an explicit coercion to int
    setTimeout(()=>resolve(...args), time|0))
}

// Helper to promisify throwing after timeout
//
function timeout (delay, errMsg){
  return new Promise( (r, reject)=> {
    setTimeout( ()=>{
      reject( new Error(errMsg || 'Timed out') )
    }, delay|0)
  })
}

function getElementWhenItExists(selector){
  // flag to end recursive search if timed out
  //
  let keepSearching = true

  // recursively search for element every 100ms
  //
  async function search (){
    const node = document.querySelector(selector)
    if ( !node && keepSearching)
      return await delay(100).then(search)
    return node
  }

  // race search against timeout and return promise with
  //  found node or a timeout error
  //
  return Promise.race([
    search(),
    timeout(10000, `Timed out looking for ${selector}`)
      .catch(e=> {
        keepSearching = false
        throw e
      })
  ])
}

const link = getElementWhenItExists('#interestingTags a')

link.then(a => a.click())

Chrome扩展程序每3秒自动点击一次按钮

1 个答案: