Chrome扩展程序关于注入脚本+本地存储

问题描述

我很困惑我的方式是通过我的第一个将所有内容放在一起的Chrome扩展程序，我将描述我正在尝试做的事情，然后介绍一些脚本摘录的内容：

1. 我有一个options.html页面和一个options.js脚本，它允许用户在文本字段中设置一个url - 这使用localStorage存储。

1. myscript'（因此它可以访问页面html中的img元素）

1. myscript.js 假设以某种方式获取本地存储数据，并确定如何操作图像元素。
   

我不从html源代码抓取图像时遇到任何问题，但似乎无法访问localStorage数据。我意识到它必须与两个脚本有不同的环境，但我不知道如何克服这个问题 - 据我所知，我需要从contentscript.js注入myscript.js，因为contentscript.js不有权访问html源代码。

希望这里有人能提出我缺少的东西。

谢谢，我非常感谢你们提供的任何帮助！

首先：您不需要注入脚本来访问页面的DOM（< img> 元素）。内容脚本不能直接访问扩展进程的 localStorage ，因为内容脚本不能直接访问扩展进程的 localStorage 。您需要在背景页面和内容脚本之间实现通信通道，以实现此目的。幸运的是，Chrome为此提供了一个简单的。

我建议使用 API而不是 localStorage 。 chrome.storage 的优点在于它可用于内容脚本，它允许您在没有后台页面的情况下读取/设置值。目前，您的代码看起来非常易于管理，因此从同步 localStorage 切换到异步 chrome.storage API是可行的。无论您选择什么，内容脚本的代码都必须异步读取/写入首选项：

 
 
 
 >  //首选项名称示例，用于以下两个内容脚本示例中
 var key ='adurl'; 
 
 //使用消息传递的示例：
 chrome.extension.sendMessage（{type：'getPref'，key：key}，function（result）{
 //做某事结果
}）; 
 //使用chrome.storage的示例：
 chrome.storage.local.get（key，function（items）{
 var result = items [key]; 
 // Do结果
}）; 
  

正如您所看到的，两者几乎没有任何区别。然而，为了让第一个工作，你还必须添加更多的逻辑到后台页面：

  //后台页面
 chrome.extension.onMessage.addListener（function（message，sender，sendResponse）{
 if（message.type ==='getPref'）{
 var result = localStorage.getItem（message。键）; 
 sendResponse（result）; 
} 
}）; 
  

另一方面，如果您想切换到 chrome.storage ，因为当前代码（使用 localStorage ）是同步的，所以选项页面中的逻辑必须稍微重写，而 chrome.storage 是异步的：

  //选项页面
函数load_options（）{ 
 chrome.storage.local.get（'repl_adurl'，function（items）{
 var repl_adurl = items.repl_adurl; 
 default_img.src = repl_adurl; 
 tf_default_ad.value = repl_adurl; 
}）; 
 
 function save_options（）{
 var tf_ad = document.getElementById（'tf_default_ad'）; 
 chrome.storage.local.set（{
 repl_adurl：tf_ad.value 
}）; 
 
 $ / code> 





文件

• （方法，方法）


• 消息传递（注意：这个页面使用 chrome.runtime 改为 chrome.extension 。为了向后兼容Chrome 25-，请使用 chrome.extension （ ））

I am puzzling my way through my first 'putting it all together' Chrome extension, I'll describe what I am trying to do and then how I have been going about it with some script excerpts:

1. I have an options.html page and an options.js script that lets the user set a url in a textfield -- this gets stored using localStorage.

1. My contentscript injects a script 'myscript' into the page ( so it can have access to the img elements from the page's html )

1. myscript.js is supposed to somehow grab the local storage data and that determines how the image elements are manipulated.

I don't have any trouble grabbing the images from the html source, but I cannot seem to access the localStorage data. I realize it must have to do with the two scripts having different environments but I am unsure of how to overcome this issue -- as far as I know I need to have myscript.js injected from contentscript.js because contentscript.js doesn't have access to the html source.

Hopefully somebody here can suggest something I am missing.

Thank you, I appreciate any help you can offer!

-Andy

解决方案

First of all: You do not need an injected script to access the page's DOM (<img> elements). The DOM is already available to the content script.

Content scripts cannot directly access the localStorage of the extension's process, you need to implement a communication channel between the background page and the content script in order to achieve this. Fortunately, Chrome offers a simple message passing API for this purpose.

I suggest to use the chrome.storage API instead of localStorage. The advantage of chrome.storage is that it's available to content scripts, which allows you to read/set values without a background page. Currently, your code looks quite manageable, so switching from the synchronous localStorage to the asynchronous chrome.storage API is doable.

Regardless of your choice, the content script's code has to read/write the preferences asynchronously:

// Example of preference name, used in the following two content script examples
var key = 'adurl';

// Example using message passing:
chrome.extension.sendMessage({type:'getPref',key:key}, function(result) {
    // Do something with result
});
// Example using chrome.storage:
chrome.storage.local.get(key, function(items) {
    var result = items[key];
    // Do something with result
});

As you can see, there's hardly any difference between the two. However, to get the first to work, you also have to add more logic to the background page:

// Background page
chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.type === 'getPref') {
        var result = localStorage.getItem(message.key);
        sendResponse(result);
    }
});

On the other hand, if you want to switch to chrome.storage, the logic in your options page has to be slightly rewritten, because the current code (using localStorage) is synchronous, while chrome.storage is asynchronous:

// Options page
function load_options() {
   chrome.storage.local.get('repl_adurl', function(items) {
       var repl_adurl = items.repl_adurl;
       default_img.src = repl_adurl;
       tf_default_ad.value = repl_adurl;
   });
}
function save_options() {
   var tf_ad = document.getElementById('tf_default_ad');
   chrome.storage.local.set({
       repl_adurl: tf_ad.value
   });
}

Documentation

• chrome.storage (method get, method set)
• Message passing (note: this page uses chrome.runtime instead chrome.extension. For backwards-compatibility with Chrome 25-, use chrome.extension (example using both))
• A simple and practical explanation of synchronous vs asynchronous ft. Chrome extensions

这篇关于Chrome扩展程序关于注入脚本+本地存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！