3秒ごとに自動的にボタンをクリックするChrome拡張機能

Question

3秒ごとに自動的にボタンをクリックするChrome拡張機能を構築しようとしています。これは私のbackground.jsファイルです

{ 
    "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"] 
} 

：

は、これは私のmanifest.jsonをファイルです

function myFunc() { 
 
\t document.getElementById('hello').click(); 
 
}; 
 

 
setInterval(myFunc, 3000);

そして、これは私が使用しているページですそれを試してください：

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

残念ながら、Chromeは私に、このエラーを与える：キャッチされない例外TypeErrorを：これは動作しないのはなぜ

ヌル

の「クリック」プロパティを読み取ることができませんか？

Answer 1

DOMに存在する前に要素にアクセスしようとしている可能性があります。 onloadのようなものがこれを助けてくれると確信していますが、現代のサードパーティーのWebサイトは絶えずDOMを再描画しているので、探しているときに要素が準備ができているかどうかは決して分かりません。私はいくつかのヘルパーを設定して、指定された時間だけ目的の要素をポーリングするのが好きです。以下の2つのファイルは、stackoverflow.comホームページにアクセスした際に最初にfavorite tagを自動的にクリックする完全な動作拡張です。

編集：初めてこの投稿をしたときに「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())