Chrome 扩展程序:点击时弹出图像更改

奶酪浆果

我对 chrome 扩展非常陌生,导航它需要大量的自学。我希望有人可以帮助我解决这个简单的问题!

我想要一个非常小的弹出窗口,在单击扩展图标时显示一本合上的书。单击后,我希望它切换到打开的书,表明它是“活动的”。我目前有一个 manifest.json 文件,默认弹出文件和一个用于样式的 css 文件和 js 文件,并且我在 js 中有一个背景页面。

我不确定如何在弹出窗口中切换书籍图像。

(图片链接在文字上)

弹出窗口非常小,这是我想要的。只是想交换那些图片以指示活动模式,并学习如何将“活动”信号发送到后台脚本以执行我想要的任务

卡林

如果您能够更改类似 src 属性的内容,它可能是最简单的方法。如果您需要两个不同的元素,那么您可能希望使用 style 属性显示/隐藏它们,并将 onclick 放在两个孩子的父 div 上。

<img src="/pathToOpenBook" onclick="toggleBookOpen" alt="imageDesc" />

function toggleBookOpen(pointerEvent){
    const openBook = "/pathToOpenBook";
    const closedBook = "/pathToClosedBook";
    const element = pointerEvent.target;
    const src = element.getAttribute('src');
    const isOpen = src.toLowerCase().includes('open');
    const updateValue = isOpen ? closedBook : openBook;
    element.setAttribute('src', updateValue);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Chrome扩展程序保留对弹出页面的更改

Chrome扩展程序:处理点击

打开弹出窗口时 Chrome 扩展程序已损坏

Chrome扩展程序:在用户点击iframe时设置操作

用户点击并按住[Chrome扩展程序]时触发功能

弹出窗口中的Chrome扩展程序点击事件处理程序捕获了错误的目标

Chrome扩展程序弹出窗口不起作用,未处理点击事件

启动Chrome时弹出消息:确认更改-已添加扩展名“ Chrome安全组件”

当用户在单独的chrome窗口中时,是否可以关闭chrome扩展程序弹出窗口?

Chrome扩展程序弹出窗口不再显示

如何缩小Chrome扩展程序的弹出窗口

Chrome扩展程序弹出窗口无法打开

禁止关闭Chrome扩展程序弹出窗口

Chrome扩展程序弹出关闭事件

即使更改了内容,Chrome扩展程序弹出窗口也会重置

我可以使用默认操作弹出窗口更改chrome扩展程序的位置吗?

如何仅更改带有弹出窗口的活动标签的 Chrome 扩展程序图标?

关闭和打开Chrome扩展程序弹出窗口时如何不丢失数据

每次加载页面时,如何从后台向 Chrome 扩展程序中的弹出窗口发送消息?

Google Chrome扩展程序:模态/弹出窗口关闭时发出警报

图像未在chrome扩展程序中加载

Chrome扩展程序:更改pageLoad的背景颜色

使用Chrome扩展程序更改DOM内容

Chrome 扩展程序更改 google serp 分页

chrome扩展程序图标未更改

Chrome扩展程序图片更改未持久

如何更改 Chrome 扩展程序的商店图标?

通过弹出式 chrome 扩展更改变量

更改Chrome扩展程序的现有“扩展程序ID”