将多个变量传递给内容脚本镶边 [英] Pass multiple variables to content script chrome

问题描述

我正在撰写我的第一个Chrome扩展，我刚刚在几个小时前开始这个。当它被硬编码时，一切运行良好。本质上，我填写了一份8页的表格。表单的每个页面都对应一个单独的内容脚本。内容脚本用于看起来像这样:(找到字段有点困难，因为它们不是标准的，但我不担心那个......这部分工作）

  var first_name ='John'; 
 var last_name ='Doe'; 
 ... 
 ... 
 document.getElementById（'first_name'）。value = first_name; 
 document.getElementById（'last_name'）。value = last_name; 
  

这工作得很好（对我而言），但我想将它分发给几个人，谁可以/可以使用源代码中的扩展名，直接编辑变量。所以我做了一个'选项'页面，以此为例：
https： //developer.chrome.com/trunk/extensions/options.html

选项页面是要填充表格的模型，每个用户可以在这里输入他们的默认值。我的save_options（）函数基本上是这样做的（伪代码）：

$ $ p $ foreach（field as field）{
localStorage [field] = document.getElement ....（field）;
}


这很好。它保存正确，显示存储的值等。

当我尝试访问内容脚本中的变量时，问题就出现了。从我读过的内容来看，这不可能（直接）完成，并且网上有各种方法可以显示如何做到这一点。我想做这样的事情（内容脚本）：

  var first_name = localStorage [first_name]; 
 var last_name = localStorage [last_name]; 
 ... 
 ... 
 document.getElementById（'first_name'）。value = first_name; 
 document.getElementById（'last_name'）。value = last_name; 
  

我的问题是：

1）对于那些处理过Chrome扩展/ localstorage / chrome.storage / etc的人，是否有一种最好的方式来做到这一点？

2）什么是最有效的方法来设置所有的变量名称/值？我更喜欢使用单独的请求来设置每个字段的循环（如上所述）。我平均每页有10个字段。

（我大概可以使用一种很长很乱的 http://developer.chrome.com/extensions/messaging.html ，但我希望提供更高效/可扩展/优雅的解决方案）

任何输入值得赞赏！

解决方案

一个解决方案是使用Messaging Passing，你已经提到过。

另一个（我认为更好）解决方案是 chrome.storage API（请参阅http://developer.chrome.com/extensions/storage.html 了解更多信息）。存储API可以直接在后台页面和内容脚本中使用，如果您将值存储在 chrome.storage.sync 下，则Chrome会自动同步。与localStorage唯一的区别在于这个API是异步的，所以你必须编写你的代码，如

  chrome.storage.sync .get（['first_name'，'last_name']，function（items）{
 document.getElementById（'first_name'）。value = items ['first_name']; 
 document.getElementById（'last_name '）.value = items ['last_name']; 
}）; 
  

I'm writing my first chrome extension, and I just started this a few hours ago. Everything worked well when it was hard-coded. Essentially, I'm filling an 8-page form. Each page of the form corresponds to a separate content script. The content scripts used to look something like this: (finding the fields is a bit more difficult, since they're not standard, but I'm not worried about that..that part works)

var first_name = 'John';
var last_name = 'Doe';
...
...
document.getElementById('first_name').value = first_name;
document.getElementById('last_name').value = last_name;

This worked fine (for me), but I want to distribute it to a few people, none of whom would/could use the extension from source code, editing the variables directly. So I made an 'Options' page, using this as an example: https://developer.chrome.com/trunk/extensions/options.html

The options page is a mockup of the form to be filled, and each user can enter their defaults here. My save_options() function basically does (pseudocode):

foreach(fields as field) {
    localStorage[field] = document.getElement....(field);
}

This works fine. It saves properly, displays the stored values, etc.

The problem comes when I try to access the variables from the content script. From what I've read, this can't be done (directly), and there are various methods online that show how to do this. I want to do something like this (content script):

var first_name = localStorage["first_name"];
var last_name = localStorage["last_name"];
...
...
document.getElementById('first_name').value = first_name;
document.getElementById('last_name').value = last_name;

My questions are:

1) For those of you who have dealt with Chrome extensions/localstorage/chrome.storage/etc, is there a 'best' way to do this?

2) What is the most efficient way to set all the variable names/values? I'd prefer a loop (like above) over setting each field with a separate request. I'm averaging 10 fields per page.

(I could probably use a long, messy form of http://developer.chrome.com/extensions/messaging.html, but I'm hoping for a more efficient/extensible/elegant solution)

Any input is appreciated!

解决方案

One solution is to use Messaging Passing, which you've mentioned.

Another (better, I think) solution is chrome.storage API (See http://developer.chrome.com/extensions/storage.html for more information). The Storage API can be directly used in both background pages and content scripts and Chrome will automatically synced if you store values under chrome.storage.sync. The only substantial difference from localStorage is that this API is asynchronous, so you have to write you code like

chrome.storage.sync.get(['first_name', 'last_name'], function(items){
    document.getElementById('first_name').value = items['first_name'];
    document.getElementById('last_name').value = items['last_name'];
});

这篇关于将多个变量传递给内容脚本镶边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！