Chrome瀏覽器插件 - 帶有存儲同步功能的選項頁面

我正在嘗試關注開發者網站上的選項指南here，但似乎沒有發生任何事情。它不會保存置於其中的文本數據，也不能從中檢索數據。當我在控制檯中運行函數時，我得到一個未被捕獲的錯誤。我不知道爲什麼會發生這種情況。Chrome瀏覽器插件 - 帶有存儲同步功能的選項頁面

任何意見，將不勝感激謝謝。

EDIT

進一步澄清正如註釋的請求。

通過常規方式（在擴展中勾選開發選項並加載了未打包的擴展）加載擴展，擴展工作的主要部分（點擊上下文菜單插入文本）。爲了運行選項html，我單擊擴展頁面上的選項鍊接並將文本插入到輸入框中。點擊保存按鈕顯示狀態JavaScript文本內容（如預期的那樣）。然而，當選項菜單重新加載時，沒有任何東西被檢索到，所以我不知道它是否有實際運行。所以我從擴展頁面打開了背景並選擇了控制檯部分。這並不顯示任何錯誤，因此我決定從控制檯調用這些函數，但認爲這會運行它們，這會導致save_options和restore_options兩個未被捕獲的錯誤。

options.html

<!DOCTYPE html> 
<html> 
<head><title>My Test Extension Options</title></head> 
<body> 
<h4>Your Favorite Statements</h4> 
<div class="favDiv1"> 
<label>Favorite 1: </label><input type="text" name="myFav1" value=""><br> 
<label>Favorite 2: </label><input type="text" name="myFav2" value=""><br> 
<label>Favorite 3: </label><input type="text" name="myFav3" value=""><br> 
<label>Favorite 4: </label><input type="text" name="myFav4" value=""><br> 
</div> 

<h4>Your Favorite Statements</h4> 
<div class="favDiv2"> 
    <label>Favorite 1: </label><input type="text" name="myFav5" value=""><br> 
    <label>Favorite 2: </label><input type="text" name="myFav6" value=""><br> 
    <label>Favorite 3: </label><input type="text" name="myFav7" value=""><br> 
    <label>Favorite 4: </label><input type="text" name="myFav8" value=""> <br> 
</div> 

<label id="savedFav"></label> 

<div id="status"></div> 
<button id="save">Save</button> 

<script src="options.js"></script> 
</body>

options.js

// Saves options to chrome.storage 

//on dom load run function to restore options 
document.addEventListener('DOMContentLoaded', restore_options); 
//on save button click, save new options values 
document.getElementById('save').addEventListener('click', save_options); 


//option input text boxes = to a var 
var Fav1 = document.getElementByName('myFav1').value; 
var Fav2 = document.getElementByName('myFav2').value; 
var Fav3 = document.getElementByName('myFav3').value; 
var Fav4 = document.getElementByName('myFav4').value; 

var Fav5 = document.getElementByName('myFav5').value; 
var Fav6 = document.getElementByName('myFav6').value; 
var Fav7 = document.getElementByName('myFav7').value; 
    var Fav8 = document.getElementByName('myFav8').value; 

//runs the save function to store in storage 
function save_options() { 

chrome.storage.sync.set({ 
     storedMyFav1: Fav1, 
     storedMyFav2: Fav2, 
     storedMyFav3: Fav3, 
     storedMyFav4: Fav4, 
     storedMyFav5: Fav5, 
     storedMyFav6: Fav6, 
     storedMyFav7: Fav7, 
     storedMyFav8: Fav8 
    }, 

    function() { 
    // Update status to let user know options were saved. 
    var status = document.getElementById('status'); 
    status.textContent = 'Options saved.'; 
    setTimeout(function() { 
     status.textContent = ''; 
    }, 750); 

}); 
} 

// Restores values stored in chrome.storage. 
function restore_options() { 

chrome.storage.sync.get(
    ["storedMyFav1", "storedMyFav2", "storedMyFav3", "storedMyFav4", "storedMyFav5", "storedMyFav6", "storedMyFav7", "storedMyFav8"], 
    function(items) { 
     Fav1 = items.storedMyFav1; 
     Fav2 = items.storedMyFav2; 
     Fav3 = items.storedMyFav3; 
     Fav4 = items.storedMyFav4; 

     Fav5 = items.storedMyFav5; 
     Fav6 = items.storedMyFav6; 
     Fav7 = items.storedMyFav7; 
     Fav8 = items.storedMyFav8; 
    }); 

}

來源

2016-07-10 Lmnoppy

您能否提供更多詳細信息您是如何運行擴展程序的？「在控制檯中運行功能」，你的意思是？ –

@HaibaraAi我更新了問題，更詳細地說明了我如何運行擴展和功能，感謝任何信息。 – Lmnoppy

'restore_options'只改變變量，而不是DOM元素。 – wOxxOm

你的問題基本上可以歸結爲試圖挽救一個參考價值。簡化：

var Fav1 = document.getElementByName('myFav1').value; 

function load() { 
    chrome.storage.sync.get("storedMyFav1", function(val) { 
    Fav1 = val; 
    }); 
} 

function save() { 
    chrome.storage.sync.set({storedMyFav1: Fav1}); 
}

第一條語句實際上只是副本的document.getElementByName('myFav1').value的價值，因爲它是一個原始值。當你下一次設置或閱讀Fav1時，它再也沒有與元素的連接。

JS沒有機制來存儲對原始值的引用。你可以保存而不是非原始：節點本身，然後追加.value當您使用它：

var Fav1 = document.getElementByName('myFav1'); 

function load() { 
    chrome.storage.sync.get("storedMyFav1", function(val) { 
    Fav1.value = val; 
    }); 
} 

function save() { 
    chrome.storage.sync.set({storedMyFav1: Fav1.value}); 
}

應用此修復程序實際的代碼作爲練習留給讀者。

來源

2016-07-11 10:38:58 Xan

我試過這段代碼的所有可能的組合，只是不能讓它顯示在選項頁面上。我讓其他人查看代碼，他們也無法讓它顯示存儲中的任何值。感謝您的幫助，但。 – Lmnoppy

我們最終得到了它，我說我們，他刪除了該文件並重新制作了options.js，不知道爲什麼，但它工作了大聲笑。必須是某些代碼寫錯了或某事。 – Lmnoppy

Chrome瀏覽器插件 - 帶有存儲同步功能的選項頁面

回答

相關問題