想象一下以下问题:单击特定页面上的任何图像时,我想更改图像缩略图上当前扩展名的图标。动态创建缩略图不是问题,只是我想添加一些动画。基本上,我希望我点击的图像被转移到绘制当前扩展图标的地方,逐渐变小。
所以主要的问题是:是否有可能纯粹在 chrome-extension 中实现这种动画?换句话说,我可以定位一个 DOM 元素(或只是一个可视区域,等等)与地址栏相交。
我想,我也应该知道当前扩展图标在工具栏中的确切位置,但这并不重要。
那么,这甚至可能吗?
想象一下以下问题:单击特定页面上的任何图像时,我想更改图像缩略图上当前扩展名的图标。动态创建缩略图不是问题,只是我想添加一些动画。基本上,我希望我点击的图像被转移到绘制当前扩展图标的地方,逐渐变小。
所以主要的问题是:是否有可能纯粹在 chrome-extension 中实现这种动画?换句话说,我可以定位一个 DOM 元素(或只是一个可视区域,等等)与地址栏相交。
我想,我也应该知道当前扩展图标在工具栏中的确切位置,但这并不重要。
那么,这甚至可能吗?
在多功能框上放置任意内容是不可能的。
您可以获得的最接近的是页面动作的动画(位于多功能框内)。您可以直接从<canvas>
元素传递数据,以获得最佳性能。见chrome.pageAction.setIcon
。
请注意,您只能使用浏览器操作或页面操作,不能同时使用两者,因此如果您已经在使用浏览器操作标记,请放弃此解决方案。
另一种解决方案是使用history.replaceState
可视化更改当前页面的 URL(域不能更改,但路径可以)。这必须通过内容脚本来完成。这使您可以通过更改字符来“动画化”整个多功能框。我建议不要使用这种方法,因为它滥用了该功能。