chrome.bookmarksからランダムなURLを取得してnewTabにロードしてください

Question

新しいタブを開いたときにブックマークバーからランダムなURLを読み込むためにchrome拡張機能を構築しています。

マイapp.jsは、次のコードを持っています

var bookmarksArray = []; 

// Function to traverse the bookmarks tree and save URLs in bookmarksArray 
function process_bookmark(bookmarks) { 
    for (var i =0; i < bookmarks.length; i++) { 
    var bookmark = bookmarks[i]; 
    if (bookmark.url) { 
     bookmarksArray.push(bookmark.url); 
    } 

    if (bookmark.children) { 
     process_bookmark(bookmark.children); 
    } 
    } 
} 

// Process all bookmarks of user 
function createbookmarksArray(){ 
    chrome.bookmarks.getTree(process_bookmark); 
} 

// Get random bookmark URL from array and load it 
function getBookmark(){ 
    window.location.href = bookmarksArray[Math.floor(Math.random()*bookmarksArray.length)]; 
} 

// All functions to be called on Page Load 
function onLoadFunctions(){ 
    createbookmarksArray(); 
    getBookmark(); 
} 

// Function to be run on page load 
document.addEventListener("DOMContentLoaded", function(event) { 
onLoadFunctions(); 
}); 

また、私のmanifest.jsonをはNEWTABとブックマークのパーミッションを要求します。 newtabがindex.htmlに設定され、ap.jsが呼び出されます

この拡張機能を実行すると、「ファイルが見つかりませんでした。移動されたか削除された可能性があります.ERR_FILE_NOT_FOUND」というエラーが表示されます。

window.location.href =bookmarksArray[Math.floor(Math.random()*bookmarksArray.length)];をコンソールに実行すると、正常に動作します。

私は関数を間違って呼び出していますか？

Answer 1

すべてのChrome API関数はコールバックを使用します。つまり、createbookmarksArrayに電話すると、がのブックマークを取得するプロセスが開始されますが、すぐに空の配列のgetBookmarkが呼び出されます。

chrome.bookmarks.getTreeは非同期です。プロセスを開始するコールを呼び出すと、プロセスがオフになり、コールバックが終了した後でコールバックされます。 JSではインラインコードが優先されるため、Chromeがすべてのブックマークをすぐに取得できる場合でも、そのコールバックが呼び出される前にすべての現在の関数が完了します。

これを避ける最も良い方法は、asyncとawaitです。 Chrome APIでは直接サポートしていませんが、chrome-extension-asyncなどのライブラリを使用して取得できます。

次に、あなたのコードは次のようになります。新しいタブが（右の音）app.jsへのアクセス権を持っていないよう

// Function to be run on page load 
document.addEventListener("DOMContentLoaded", async event => { 
    try { 
     // await tells JS to continue after the callback has fired 
     const bookmarkTree = await chrome.bookmarks.getTree(); 

     // Now flatten the collection and grab one at random 
     const bookmarksArray = process_bookmark(bookmarkTree); 
     const randomIndex = Math.floor(Math.random()*bookmarksArray.length); 
     const randomBookmark = bookmarksArray[randomIndex]; 

     // Create a new tab with the URL 
     await chrome.tabs.create({ url: randomBookmark }); 
    } 
    catch(err){ 
     // Handle any error in the callbacks here 
    } 
});