2024年Web前端最新前端拓展：如何开发一个 Chrome 插件？，字节跳动正式启动2024届秋季校招

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

// 或者若干个js文件，后台会默认生成一个空白的html

“scripts”: [“./js/background.js”]

}

}

background配置项，为插件的后台常驻页面，生命周期随着浏览器的生命周期一样，浏览器一启动，后台页面就会开始运行，直到浏览器被关闭；或者在插件管理页面，将该插件禁用了，后台页面也会停止运行。

另外，background拥有的权限比较高，几乎可以调用所有的Chrome扩展API（除了devtools），同时拥有直接跨域的能力。

page:指定一个网页为后台页面。

scripts:指定若干个js文件，后台会自动生成一个html，并按顺序调用这些js文件。

注意：page 和 scripts 选项只能二选一，不然会报错。

配置好之后，属性插件，会出现一个背景页选项：

我使用的是一个background.js文件：

function _back() {

console.log(‘background.js’)

}

console.log(‘running…’)

点进去看看里面装的什么玩意：