Chrome扩展开发入门

最新推荐文章于 2024-08-31 08:56:40 发布

原创最新推荐文章于 2024-08-31 08:56:40 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#chrome扩展 #javascript

Chrome扩展同时被 2 个专栏收录

1 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

扯蛋

　　高能预警，扯蛋部分和本次技术讨论无关，可以跳过不看
　　不知道从何开始，写博客或者记笔记时我都要写个”前言”，把写本次文章的前因后果、当时的感想或者学习的想法写下来。我想学一个技术都是有最初的动机的，如果一上来就谈技术，而根本不知道自己的需求是什么，那么学习的效果应该不是太好。
　　其实这几年我学过好多东西，学的时候觉得很简单，感觉没必要记录，但是时间一长，就很尴尬的全忘了，想要用时只能几乎从头开始回忆。所以，我觉得学习任何知识，不要以简单和困难作为是否记录的因素，不管怎样，只要学了并且有收获，不管是成功还是失败，也不管当前的进度是如何，全记下来，即使你学某个知识学到一半不学了，但是等一段时间后你又想这了，你就能很快的回忆起来。

本文前言

　　今天写的《Chrome扩展开发入门》只是把最简单的东西记录下，就是Chrome浏览器如何加载自己写的javascript脚本并打出”Hello world!”，我想只要知道了这个，后续就可以跟着相应的教材慢慢学了。
　　而学这个本来是想写个12306抢票插件啥的，但是最近好忙，先把其它几个正在学习的内容学完再学这个。
　　参考免费电子书《Chrome扩展及应用开发》,csdn也有pdf版本的，但是pdf的里面没有图片，里面的链接也无法直接点，所以还是建议直接看网上的。
　　本人开发工具：PHPStorm。

Chrome扩展—“hello world!”

　　我们先运行看下效果，然后帖出全部代码，最后解释代码。

运行方法

　　打开Chrome，我使用的版本是版本 55.0.2883.87 m (64-bit)，不同Chrome可能有点不一样。具体内容看图了，很简单的。
这里写图片描述

这里写图片描述

　　选择源码目录

　　点击”确认”后就弹出”hello world!”
这里写图片描述
　　源码目录中主要就是这两个文件，.idea是phpstorm的配置文件，不用管

源码　　

　　此次运行是在Chrome加载时打印的，一共两个文件：manifest.json和popup.js。
　　maniffest.json内容如下：

{
    //在chrome中加载时运行
    "name": "Hello world扩展",
    "manifest_version":2,
    "version": "1.0",
    "description": "我的第一个Chrome扩展程序",
    "background": {
    "scripts": ["popup.js"]  
    }
}

　　popup.js内容如下：

window.onload= function () {
    alert("hello world!");
}

　　Chorme扩展程序必须要有一个名为maniffest.json的文件，具体各字段含义请参见给出的电子书。