1

我正在尝试制作一个 chrome 扩展，当单击它时会旋转页面上的图像。（目的：很多时候在whatsapp上发送的图像被旋转90度，在whatsapp web（笔记本电脑屏幕）上查看它们时非常烦人。我不知道是否有任何方法可以直接旋转而不下载所以我认为它会对制作 chrome 扩展很有用，它在单击时将图像旋转 90 度。）每当单击扩展图标时，我都会从 background.js 向 content.js 发送信号。

内容.js

chrome.runtime.onMessage.addListener(gotMsg);
let count = 0 ;
function gotMsg(request, sender, sendResponce) {
    console.log(request.txt);
    if (request.txt == "rotate") {
        count+=1;
        let images = document.querySelectorAll('img');
        for (img of images) {
            rot=String(90*count);
            img.style.transform = "rotate("+rot+"deg)";
        }
    }
}

但这里的问题是这只能旋转图像，但 img 标签可能包含在某些 div 中，并且由于这些 div 没有被触摸，因此图像正在旋转，但其中的某些部分被剪切并且当图像旋转 90 时不可见度或 270 度。

没有旋转 的图像 有旋转的图像

背景.js

chrome.browserAction.onClicked.addListener(btnClicked);
function btnClicked(tab){
    console.log("btn clicked");
    console.log(tab);
    let msg = {
        txt:"rotate"
    }
    // sending message
    chrome.tabs.sendMessage(tab.id,msg);
}

使用清单版本 2

我试图交换图像的长度和宽度，但这不起作用，因为包含它的 div 不受此影响。帮助我找出如何获取所有包含 img 标签的父标签。（因为我认为这将有助于解决问题。）

我是 javascript 和 chrome 扩展制作的初学者，所以请详细说明解决问题的可能方法。

4

0 回答 0