Question

我需要通过单击上下文菜单选项来旋转图像... 这样的事情。

我正在尝试使用JQueryRotate和JQueryEasing开发扩展。这是我想要使用的代码示例 http://jsfiddle.net/8xwqdk71/（我没有嵌入代码，因为它显示错误）

我的问题是我不知道如何将此代码应用到我的扩展中，我只阅读了网络上的几个例子，他们只专注于在网页中使用JqueryRotate而不是在扩展中。我将非常感谢任何人可以给我的任何信息或例子

这是我的档案：

的manifest.json

{
  "manifest_version": 2,
  "name": "image rotator",
  "author": "me",
  "version": "1.0",
  "description": "i rotate images",
  "browser_action": {
    "default_icon": "icon-large.png",
    "default_popup": ""
  },

  "background": {
    "page": "background.html"
  },

  "permissions": [
    "contextMenus"
  ],
  "icons": {
    "16": "icon-bitty.png",
    "48": "icon-small.png",
    "128": "icon-large.png"
  }
}

background.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.easing.js"></script>
    <script type="text/javascript" src="jQueryRotate.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menus.js"></script>
</head>
<body>
</body>
</html>

menus.js

///// Parent contextMenu /////

chrome.contextMenus.create({
    title: "Image rotator",
    contexts: ["all"],
    id: "parent",
});

///// First submenu Context Menu /////

chrome.contextMenus.create({
    title: "Rotar 90",
    contexts:["all"],
    parentId: "parent",
    id: "child1",
    onclick: child1Search,
});
chrome.contextMenus.create({
    title: "Rotar -90",
    contexts:["all"],
    parentId: "parent",
    id: "child2",
    onclick: child2Search,
});
chrome.contextMenus.create({
    title: "Rotar 180",
    contexts:["all"],
    parentId: "parent",
    id: "child3",
    onclick: child3Search,
});
chrome.contextMenus.create({
    title: "Rotar -180",
    contexts:["all"],
    parentId: "parent",
    id: "child4",
    onclick: child4Search,
});

Answer 1

我不确定如何使用 jQueryRotate ，但这里是纯粹的js方式具有相同的效果。

因此，您需要一个后台脚本来创建上下文菜单和一个内容脚本来处理旋转。

<强>的manifest.json

{
  "manifest_version": 2,
  "name": "Rotar",
  "description": "",
  "version": "1.0.0",
  "content_scripts": [{
    "js": ["content-script.js"],
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "run_at": "document_end",
    "all_frames": true
  }],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "tabs",
    "contextMenus"
  ]
}

<强> background.js

后台脚本在单击上下文项时发送带有旋转度的消息。请注意，我已将contexts:["all"]更改为contexts:["image"]。

///// Parent contextMenu /////

chrome.contextMenus.create({
    title: "Image rotator",
    contexts: ["image"],
    id: "parent",
});

///// First submenu Context Menu /////

chrome.contextMenus.create({
    title: "Rotar 90",
    contexts:["image"],
    parentId: "parent",
    id: "child1",
    onclick: rotate.bind(null, '90'),
});
chrome.contextMenus.create({
    title: "Rotar -90",
    contexts:["image"],
    parentId: "parent",
    id: "child2",
    onclick: rotate.bind(null, '-90'),
});
chrome.contextMenus.create({
    title: "Rotar 180",
    contexts:["image"],
    parentId: "parent",
    id: "child3",
    onclick: rotate.bind(null, '180'),
});
chrome.contextMenus.create({
    title: "Rotar -180",
    contexts:["image"],
    parentId: "parent",
    id: "child4",
    onclick: rotate.bind(null, '-180'),
});

/**
 * Sends message to content-script 
 */
function rotate(deg, event, tab) {
    chrome.tabs.sendMessage(tab.id, {
        deg: deg
    }, {
        frameId: event.frameId
    });
}

内容-的script.js

内容脚本会跟踪鼠标右键单击的所有图像，并在接收消息时应用CSS旋转。

let lastClickedImage = null; document.body.addEventListener('mousedown', function(e) { if(e.target.matches('img') && e.button === 2) { // right click to an image lastClickedImage = e.target; } }); chrome.runtime.onMessage.addListener(request => { if(lastClickedImage) { lastClickedImage.style.transition = 'transform 0.5s ease'; lastClickedImage.style.transform = 'rotate(' + request.deg + 'deg)'; } });

Answer 2

我从扩展程序IMG Rotate中找到了一些旧的扩展文件，并更新它们，因为它们使用了不稳定的方法。但他们不使用jQueryRotate。

<强>的manifest.json

{
    "manifest_version": 2,
    "name": "Rotar ",
    "version": "1.0",
    "background": {
    "page": "background.html"
  },
    "permissions" : [
        "contextMenus",
        "tabs",
        "http://*/*",
        "https://*/*"
    ],
    "content_scripts" : [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": ["jquery-1.5.2.min","contentscript.js"]
        }
    ],
    "icons" : {
        "16" : "icon-bitty.png",
        "48" : "icon-small.png",
        "128" : "icon-large.png"
    }
}

<强> background.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.5.2.min"></script>
    <script type="text/javascript" src="contentscript.js"></script>
    <script type="text/javascript" src="background.js"></script>
</head>
<body>
</body>
</html>

<强> background.js

        /**
         * Returns a handler which will open a new window when activated.
         */
        function rotateClockWise() {
            return function (info, tab1) {
                chrome.tabs.getSelected(null, function(tab) {
                    chrome.tabs.sendRequest(tab.id, {angle: 90, rotation: 'rotate'}, function(response) {

                    });
                });
            };
        }

        function rotateCounterClockWise() {
            return function (info, tab1) {
                chrome.tabs.getSelected(null, function(tab) {
                    chrome.tabs.sendRequest(tab.id, {angle: -90, rotation: 'rotate'}, function(response) {

                    });
                });
            };
        }

        function upright() {
            return function (info, tab1) {
                chrome.tabs.getSelected(null, function(tab) {
                    chrome.tabs.sendRequest(tab.id, {angle: 0, rotation: 'flip'}, function(response) {

                    });
                });
            };
        }

        function upsideDown() {
            return function (info, tab1) {
                chrome.tabs.getSelected(null, function(tab) {
                    chrome.tabs.sendRequest(tab.id, {angle: 180, rotation: 'flip'}, function(response) {

                    });
                });
            };
        }


        /**
         * Create a context menu which will only show up for images.
         */
        chrome.contextMenus.create({
                    "title" : "Rotar 90",
                    "type" : "normal",
                    "contexts" : ["all"],
                    "onclick" : rotateClockWise()
                });

        chrome.contextMenus.create({
                    "title" : "Rotar -90",
                    "type" : "normal",
                    "contexts" : ["all"],
                    "onclick" : rotateCounterClockWise()
                });

        chrome.contextMenus.create({
                    "title" : "Rotar 180",
                    "type" : "normal",
                    "contexts" : ["all"],
                    "onclick" : upsideDown()
                });

        chrome.contextMenus.create({
                    "title" : "Rotar -180",
                    "type" : "normal",
                    "contexts" : ["all"],
                    "onclick" : upright()
                });

<强> contentscript.js

var selectedImage = null;
$("*", document.body).mousedown(function (event) {
    switch (event.which) {
        case 3:
            selectedImage = $(this).get(0);
            event.stopPropagation();
            break;
        default:
            break;
    }
});

chrome.extension.onRequest.addListener(onRequest);

function onRequest(request, sender, sendResponse) {
    var degree;
    if (request.rotation == 'flip') {
        degree = request.angle;
    } else {
        degree = getCurrentRotation(request.angle);
    }
    selectedImage.style.webkitTransform = 'rotate(' + degree + 'deg)';
    sendResponse({}); // clean up.
}

function getCurrentRotation(angle) {
    var currentDegree = selectedImage.style['-webkit-transform'];
    if (currentDegree && currentDegree != "") {
        var start = currentDegree.indexOf('(');
        var end = currentDegree.indexOf('deg)');
        angle = parseInt(currentDegree.substring(start + 1, end)) + angle;
    }
    return angle;
}

你还需要jquery来完成这项工作 https://code.jquery.com/jquery-1.5.2.min.js

使用jQueryRotate在Chrome扩展中旋转所选图像

2 个答案: