如何开发一个导航到网站的简单 chrome 扩展答案

【问题标题】：How to develop a simple chrome extension that navigate to a website如何开发一个导航到网站的简单 chrome 扩展
【发布时间】：2013-11-22 16:09:52
【问题描述】：

我需要创建一个简单的 chrome 扩展程序，单击它时必须导航到该网站。我已经搜索了很长时间。但我找不到。请帮助我。这是我的 manifest.json 文件

{
 "name": "My First Extension",
 "version": "1.0",
 "description": "The first extension that I made.",
    "manifest_version":2,
     "browser_action": {
   "default_icon": "icon_128.png"
 },
 "background_page": "background.html",
 "permissions": [
  "tabs"
]
}

这是我的背景.html

   <script>
  chrome.browserAction.onClicked.addListener(function(tab) {
     chrome.tabs.create({'url': "http://calpinemate.com"});
   </script>

我只是想导航到我的网站。但它不起作用。请任何人帮助我。我的目录中只有这两个文件和一个图像 icon_128.png。请帮助我

【问题讨论】：

你试过这个链接了吗？您可以根据需要对其进行修改。或者拿它的基本前提，尝试去实现它。 stackoverflow.com/questions/8183696/…
我想知道上面的链接有什么帮助...
@user3016912：顺便说一句，我更新了我的答案，演示了如何更改扩展图标。

标签： google-chrome-extension

【解决方案1】：

manifest_version 2 不再支持background_page。而是使用new format。您还可以删除 tabs 权限值，因为 chrome.tabs.create 不需要它。

{
    "name": "My First Extension",
    "version": "1.0",
    "description": "The first extension that I made.",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": "icon_128.png"
    },
    "background": {
        "scripts": ["background.js"]
    }
}

将background.html 移动到background.js，并删除<script></script> 标签。

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({'url': "http://calpinemate.com"});
});

【讨论】：

谢谢你 abraham。我对添加扩展了解不多。非常感谢你纠正我。
我需要澄清一些疑问。请帮助我。现在它已经导航到我的网站。这是一个登录页面。当用户登录它时，扩展图标应该显示为绿色并且当用户注销时，它应该显示为红色。我该怎么做？请帮助我
看sending messages from web pages
我应该使用cookies还是会话？？

【解决方案2】：

可能是因为您在后台页面中缺少 theclosibg })。
此外，您不需要任何权限，建议使用非持久性背景页面（a.k.a. event page）。

例如：

background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({ "url": "http://calpinemate.com" });
});

manifest.json：

{
    "manifest_version": 2,
    "name":        "Test Extension",
    "description": "...",
    "version":     "0.0",

    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Test Extension"
        "default_icon": "icon_128.png"
    }
}

顺便说一句，既然你似乎对更改扩展图标感兴趣，你可以看看 chrome.browserAction.setIcon()。
下面是一个在用户点击浏览器操作时切换扩展图标的示例（您可以根据自己的具体需要进行调整）。

background.js：

var icons = ["red.png", "green.png"];

chrome.browserAction.onClicked.addListener(function(tab) {
    var iconIdx = localStorage.getItem("iconIdx");
    var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
    chrome.browserAction.setIcon({ path: icons[newIdx] });
    localStorage.setItem("iconIdx", newIdx);
});

【讨论】：