Options
To allow users to customize the extensions based on their preferences, you'll want to have an option page. If you want to, in the Extender Management Panel provides an option link, click on it to open a new tab to your Options page.
First step: Declare your Extended Options page in manifest
1: {
2: "name": "My extension",
3: ...
4: "options_page": "options.html",
5: ...
6: }
Step Two: Encoding Options page
This is an example of an option page:
1: 2: 3: <script type= "Text/javascript" >
4:
5://Saves options to Localstorage.
6:function save_options () {
7:var select = document.getElementById ("color");
8:var color = select.children[select.selectedindex].value;
9:localstorage ["favorite_color"] = color;
10:
One://Update status to let user know options were saved.
12:var status = document.getElementById ("status");
13:status.innerhtml = "Options Saved."
14:settimeout (function () {
15:status.innerhtml = "";
16:}, 750);
17:}
18:
://Restores Select box state to saved value from Localstorage.
20:function restore_options () {
21:var favorite = localstorage["Favorite_Color"];
22:if (!favorite) {
23:return;
24:}
25:var select = document.getElementById ("color");
26:for (var i = 0; i < select.children.length; i++) {
27:var child = Select.children[i];
28:if (Child.value = = favorite) {
29:child.selected = "true";
30:break;
31:}
32:}
33:}
34:
</script>
36:
Notoginseng: <body onload= "restore_options ()" >
38:
39:favorite Color:
: <select id= "Color" >
: <option value= "Red" >red</option>
: <option value= "Green" >green</option>
<option value= "Blue" >blue</option>
: <option value= "Yellow" >yellow</option>
: </select>
46:
: <br>
<button onclick= "save_options ()" >Save</button>
: </body>
:
Important Notes
The official 4.0.222 later versions support this feature.
We are going to provide some default CSS stylesheets to encourage most of the options page to have a coordinated style and you can focus on crbug.com/25317 update notifications.
Original link: http://code.google.com/chrome/extensions/options.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
