Firefox 扩展无法访问本地存储
Firefox extension fails on accessing local storage
我有一个 Chrome 扩展,我正在尝试适应 FF。当我尝试访问本地存储时,代码失败了。控制台没有JS错误。我是 FF 的新手,所以问题可能很简单。为什么执行在 var gettingItem = browser.local.storage.get();
停止
此外,当我在 FF 中加载我的扩展程序时,我没有看到像在 Chrome 中那样的选项菜单。如何打开选项面板?
我的清单:
{
"manifest_version": 2,
"name": "My name's mod",
"short_name": "Mod",
"version": "1.2.0",
"description": "Make the ",
"web_accessible_resources": [
"base-theme.css",
"light-theme.css",
"wider-theme.css",
"nobg-theme.css"
],
"permissions": [
"storage",
"cookies",
"*://forums.site.com/*"
],
"content_scripts": [{
"js": [
"cg-mod.js",
"cg-forum-class.js",
"cg-forum-writer.js",
"cg-onload.js"
],
"matches": ["https://forums.site.com/*", "http://forums.site.com/*" ]
}],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"options_ui": {
"page": "options.html",
"chrome_style": true
}
}
这是被调用的第一个文件:
//
function IsChrome(){
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
return isChrome;
}
function IsFirefox()
{
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
return isFirefox;
}
function GetStorage( callback ){
var defaultOptions = {
Theme: 'wider',
ShowSignatures: true,
TheNewlyArrived: false,
Kickstarter: false,
Recruitment: false,
Off: false
};
if( IsChrome() )
{
chrome.storage.sync.get( defaultOptions, function(items) {
console.log( "Get Storage for Chrome");
console.log( items );
callback( items );
});
}else if( IsFirefox() ) {
console.log("is firefox: "+ IsFirefox());
//browser.storage.sync.get
var gettingItem = browser.local.storage.get();
console.log(gettingItem);
console.log("THE PROBLEM IS HERE ^^");
/* gettingItem.then((items) => {
console.log( "Get Storage for Firefox");
callback( items );
}); */
}
}
然后在我的 onload 文件中,我有这个:
/*
Run these commands on startup.
*/
// link the custom CSS as a stylesheet to give it higher priority
function Onload( storage )
{
console.log( "storage: ");
console.log( storage );
// If off is true, they don't want to load the extension...
if( storage.Off )
return;
var link = document.createElement('link');
if( IsChrome() ){
link.href = chrome.extension.getURL( 'base-theme.css' );
} else if( IsFirefox() ) {
link.href = browser.extension.getURL( 'base-theme.css' );
}
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName("head")[0].appendChild(link);
var link = document.createElement('link');
if( IsChrome() ){
link.href = chrome.extension.getURL( storage.Theme +'-theme.css');
} else if( IsFirefox() ) {
link.href = browser.extension.getURL( storage.Theme +'-theme.css');
}
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName("head")[0].appendChild(link);
if( ! storage.ShowSignatures )
ForumWriter.ToggleVisibility( 'Signature' );
}
console.log("get storage pre");
// Call the Google values through a callback
GetStorage( Onload );
console.log("get storage post");
控制台显示:
Name says hello! (proves the files are loading in the right oder)
get storage pre
is firefox: true
问题来自这一行:
browser.local.storage.get()
你搞混了,local是属性的存储,而storage是属性的浏览器。
browser.storage.local.get()
但是查看您的 chrome 实现,您似乎想要访问同步存储...
browser.storage.sync.get()
还有。我真的很想指出,你正在加倍你的代码库,应该避免这种情况,以方便未来的维护。我向您推荐这段代码:
var client;
if( IsChrome() ){
client= chrome;
} else if( IsFirefox() ) {
client = browser;
}
那么你就可以替换所有看起来像这样的片段
if( IsChrome() ){
link.href = chrome.extension.getURL( 'base-theme.css' );
} else if( IsFirefox() ) {
link.href = browser.extension.getURL( 'base-theme.css' );
}
有
link.href = client.extension.getURL( 'base-theme.css' );
我有一个 Chrome 扩展,我正在尝试适应 FF。当我尝试访问本地存储时,代码失败了。控制台没有JS错误。我是 FF 的新手,所以问题可能很简单。为什么执行在 var gettingItem = browser.local.storage.get();
此外,当我在 FF 中加载我的扩展程序时,我没有看到像在 Chrome 中那样的选项菜单。如何打开选项面板?
我的清单:
{
"manifest_version": 2,
"name": "My name's mod",
"short_name": "Mod",
"version": "1.2.0",
"description": "Make the ",
"web_accessible_resources": [
"base-theme.css",
"light-theme.css",
"wider-theme.css",
"nobg-theme.css"
],
"permissions": [
"storage",
"cookies",
"*://forums.site.com/*"
],
"content_scripts": [{
"js": [
"cg-mod.js",
"cg-forum-class.js",
"cg-forum-writer.js",
"cg-onload.js"
],
"matches": ["https://forums.site.com/*", "http://forums.site.com/*" ]
}],
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"options_ui": {
"page": "options.html",
"chrome_style": true
}
}
这是被调用的第一个文件:
//
function IsChrome(){
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
return isChrome;
}
function IsFirefox()
{
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
return isFirefox;
}
function GetStorage( callback ){
var defaultOptions = {
Theme: 'wider',
ShowSignatures: true,
TheNewlyArrived: false,
Kickstarter: false,
Recruitment: false,
Off: false
};
if( IsChrome() )
{
chrome.storage.sync.get( defaultOptions, function(items) {
console.log( "Get Storage for Chrome");
console.log( items );
callback( items );
});
}else if( IsFirefox() ) {
console.log("is firefox: "+ IsFirefox());
//browser.storage.sync.get
var gettingItem = browser.local.storage.get();
console.log(gettingItem);
console.log("THE PROBLEM IS HERE ^^");
/* gettingItem.then((items) => {
console.log( "Get Storage for Firefox");
callback( items );
}); */
}
}
然后在我的 onload 文件中,我有这个:
/*
Run these commands on startup.
*/
// link the custom CSS as a stylesheet to give it higher priority
function Onload( storage )
{
console.log( "storage: ");
console.log( storage );
// If off is true, they don't want to load the extension...
if( storage.Off )
return;
var link = document.createElement('link');
if( IsChrome() ){
link.href = chrome.extension.getURL( 'base-theme.css' );
} else if( IsFirefox() ) {
link.href = browser.extension.getURL( 'base-theme.css' );
}
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName("head")[0].appendChild(link);
var link = document.createElement('link');
if( IsChrome() ){
link.href = chrome.extension.getURL( storage.Theme +'-theme.css');
} else if( IsFirefox() ) {
link.href = browser.extension.getURL( storage.Theme +'-theme.css');
}
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName("head")[0].appendChild(link);
if( ! storage.ShowSignatures )
ForumWriter.ToggleVisibility( 'Signature' );
}
console.log("get storage pre");
// Call the Google values through a callback
GetStorage( Onload );
console.log("get storage post");
控制台显示:
Name says hello! (proves the files are loading in the right oder)
get storage pre
is firefox: true
问题来自这一行:
browser.local.storage.get()
你搞混了,local是属性的存储,而storage是属性的浏览器。
browser.storage.local.get()
但是查看您的 chrome 实现,您似乎想要访问同步存储...
browser.storage.sync.get()
还有。我真的很想指出,你正在加倍你的代码库,应该避免这种情况,以方便未来的维护。我向您推荐这段代码:
var client;
if( IsChrome() ){
client= chrome;
} else if( IsFirefox() ) {
client = browser;
}
那么你就可以替换所有看起来像这样的片段
if( IsChrome() ){
link.href = chrome.extension.getURL( 'base-theme.css' );
} else if( IsFirefox() ) {
link.href = browser.extension.getURL( 'base-theme.css' );
}
有
link.href = client.extension.getURL( 'base-theme.css' );