谷歌Chrome浏览器扩展程序开发小记

本文记录了一次特别的谷歌Chrome浏览器扩展程序开发经历，相信对有意开发此类程序的小伙伴们来说，具有一定的参考价值。

在弹性工作制的公司环境下，每个人的工作时间并不固定，这使得每月的工作时间统计变得复杂。为了解决这个问题，有人尝试使用Chrome扩展程序来统计工作时间。现有的工具似乎并未完全满足需求，因此我决定亲自开发一个。

在开发之初，我首先尝试使用JavaScript编写相关功能，并通过F12开发者工具的Console运行测试。由于公司使用的OA系统并未引入jQuery库，我原本打算动态引入jQuery类库以简化开发。在实际操作中遇到了两个问题：一是系统中已存在使用$符号的脚本，二是系统采用的是复杂的iframe嵌套结构，直接在console运行的代码可能无法在其内部frame中使用。

尽管我尝试通过jQuery.noConflict()解决$符号的冲突问题，但仍然存在jquery库和原系统JS库的调用顺序问题。更棘手的是，在内部的frame中无法访问到jQuery对象。面对这些问题，我决定放弃使用jQuery，转而使用原生JavaScript进行开发。

我的扩展程序不仅要统计每月的累计工作时间，还要能显示平均每天工作时长、每日工作时长以及20点以后和22点以后的下班天数，以便进行相应的报销。这一功能对于公司来说或许并不复杂，但在开发过程中却需要细致入微的考虑和不断的调试。

考勤数据分析报告

通过精心编写的JS脚本，我们对考勤数据进行了深入的分析与可视化处理。让我们一同来解读这份报告吧。

我们获取了时间列表并进行了处理。接着，我们统计了实际上班天数、请假天数以及总工作时间。我们还特别关注了员工每日的工作时长，并对此进行了详细记录与分类。接下来，让我们逐一解读这些数据。

出勤时间方面，员工本月共计工作了XX小时XX分钟。平均每天工作时长为XX小时。值得注意的是，本月中有部分员工的每日工作时间未满8小时，共有XX天如此。还有XX天的工作时间超过了20点、XX天超过21点、XX天超过22点以及XX天超过了23点。这些数据为我们提供了员工工作时间的详尽情况。

从考勤记录来看，员工实际有打卡记录的天数为XX天，请假或外出天数为XX天。这为我们提供了员工出勤情况的直观数据。

通过监听考勤查询按钮的点击事件，我们的JS方法在考勤信息加载完成后自动执行，实时更新上述数据，方便管理者快速了解员工的考勤状况。这一功能确保了数据的实时性与准确性。

这份报告以醒目的红色和加粗字体突出了关键数据，使得整体报告既清晰又易于理解。通过这份报告，管理者可以直观地了解到员工的出勤、工作时间以及请假情况，从而做出更为合理的考勤管理决策。

报告展示区域已经嵌入到页面中，每次数据更新后，相关内容也会随之变化。若需进一步操作或有任何疑问，请与管理员联系。

参考了manifest.json文件中content_scripts节点的详细属性说明资料后，我们开始了扩展程序的创建。其中，manifest.json文件是不可或缺的，它的最终内容如下：

```json

{

"manifest_version": 2,

"name": "扩展程序名称",

"version": "0.1.0",

"description": "插件描述信息",

"icons": {

"48": "icon.png"

},

"content_scripts": [

{

"all_frames": true,

"matches": ["

"js": ["haha.js"],

"run_at": "document_end"

}

]

}

```

在同目录下放置了一个icon.png图片文件，至此，所有需要的文件都已准备就绪。目录结构清晰，方便进行后续操作。

接下来，打开Chrome的扩展程序列表，启用开发者模式。在扩展程序根目录下，输入包含上述三个文件（json、png及待编写的js脚本文件）的父目录。然后，点击【打包扩展程序】，即可完成打包。

如果在点击该按钮后长时间没有反应，可能是由于Chrome不允许安装第三方非认证的扩展程序。可以通过以下方式解决：在Chrome快捷方式的属性目标输入框后面追加参数“enable-easy-off-store-extension-install”，注意参数前需保留一个空格。然后再次尝试上述步骤即可。

第三步：解决Chrome对非官方扩展程序的屏蔽问题

Chrome可能会提示暂停非官方扩展程序，每次启动都会有这个提示，非常烦人。为了解决这个问题，我们需要查找并遵循防止Chrome屏蔽非官方扩展程序的教程。根据这些教程说明，我们可以轻松地解决这个问题。

请注意，以上内容可能需要结合编程技术来实现，确保在编写和打包Chrome扩展程序时遵循正确的步骤和规定。通过Cambrian渲染引擎（或其他相关工具）呈现最终的“body”部分，以展示完整的扩展程序界面和效果。