如何在 Microsoft Word Online 文档中获取用户选择

卢杰威

我正在创建一个 Chrome 扩展程序，它应该与 Microsoft Word Online 文档中的用户选择进行交互 - 添加新的突出显示而不是自然选择突出显示，然后将其删除。问题是我无法获得用户选择：响应window.getSelection()返回结果，如选择为空。

以下是我的扩展中的文件：

清单文件

{
    "manifest_version": 2,
    "name": "The extension name",
    "version": "1.0",
    "description": "This extension description",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },

    "icons": {
        "128": "icon.png"
    },

    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["content_script.js"],
        "run_at": "document_end",
        "all_frames": true
    }],

    "permissions": ["activeTab"]
}

弹出窗口.html

<!doctype html>
<html>
<head>
    <script src="popup.js"></script>
</head>
<body>
    <div id="wrapper">
        <form id="settings" name="settings">
            <div id="apply" class="form-row">
                <input type="submit" name="apply" value="Apply"/>
            </div>
        </form>
    </div>
</body>
</html>

弹出窗口.js

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("settings").addEventListener("submit", function (e) {
        e.preventDefault();

        chrome.tabs.executeScript(null, {file: 'toolbar.js'}, function() {
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {});
            });
        );
    }, false);
});

工具栏.js

function showToolbar() {
    var dom_body = document.getElementsByTagName('body')[0];
    var tb_wrapper = document.createElement('div');
    tb_wrapper.id = "toolbar_wrapper";

    var tb_toolbar_play = document.createElement('button');
    tb_toolbar_play.id = "toolbar_play";
    tb_toolbar_play.title = "Play";
    tb_toolbar_play.value = "Play";

    tb_wrapper.appendChild(tb_toolbar_play);
    dom_body.appendChild(tb_wrapper);
}

showToolbar();

content_script.js

function playButtonOnClickEventListener(request, sender, sendResponse) {
    var toolbar = document.getElementById("toolbar_wrapper");

    if (toolbar !== null) {
        var toolbar_play_button = document.getElementById("toolbar_play");
        toolbar_play_button.addEventListener("click", function (e) {
            var selection = window.getSelection();
            console.log(selection);
        });
    }

    sendResponse({data: "response", success: true});
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    playButtonOnClickEventListener(request, sender, sendResponse);
});

所以，我想在console.log(selection)执行后在 Chrome 开发者工具中看到什么：

我实际得到的：

PS 该扩展程序与 Google Docs 完美配合。

卢杰威

这是问题的解决方案。希望它可以对某人有用一次。

目前我对整个画面的看法不同，所以我改变了文件的数量及其内容。

清单文件

{
    "manifest_version": 2,

    "version": "1.1.1",

    "name": "Test name",

    "description": "Test description",

    "browser_action": {
        "default_icon": "icon.png"
    },

    "icons": {
        "128": "icon.png"
    },

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content_script.js"],
            "run_at": "document_end",
            "all_frames": true
        }
    ],

    "permissions": ["activeTab"]
}

content_script.js

//Word Online pages contain several different iframes, so, in order 
//to find the one where the text that we are going to work with 
//is placed, we have to use the Chrome Runtime API and its 
//"sendMessage" method that works in every frame.
//https://developer.chrome.com/apps/runtime#method-sendMessage

chrome.runtime.sendMessage("", function() {
    if (checkFrameLocation()) {
        showToolbar();
    }
});

function checkFrameLocation() {
    //So as I work with documents in OneDrive (onedrive.live.com) 
    //and in Sharepoint (<USER_NAME>-my.shrepoint.com), I found out 
    //that I need iframes with these URLs only.

    var trusted_urls = [
        "https://euc-word-edit.officeapps.live.com",
        "https://word-edit.officeapps.live.com",
        "nl1-word-edit.officeapps.live.com"
    ];

    var result = false;

    for (var i = 0; i < trusted_urls.length; i++) {
        if (window.location.href.indexOf(trusted_urls[i]) > -1) {
            result = true;
        }
    }

    return result;
}

function showToolbar() {
    var dom_body = document.body;

    var tb_wrapper = document.createElement('div');
    tb_wrapper.id = "toolbar_wrapper";
    tb_wrapper.style.position = "absolute";
    tb_wrapper.style.top = "200px";
    tb_wrapper.style.left = "200px";
    tb_wrapper.style.backgroundColor = "#ffffff";
    tb_wrapper.style.height = "30px";
    tb_wrapper.style.width = "50px";

    var tb_play = document.createElement('button');
    tb_play.id = "toolbar_play_button";
    tb_play.title = "Play";
    tb_play.innerHTML = "&#9658;";
    tb_play.style.height = "100%";
    tb_play.style.width = "100%";
    tb_play.style.lineHeight = "12px";

    tb_play.addEventListener("click", function() {
        playButtonOnClickEventListener();
    });

    tb_wrapper.appendChild(tb_play);
    dom_body.appendChild(tb_wrapper);
}

function playButtonOnClickEventListener() {
    //Now we can use the window selection object

    var window_selection = window.getSelection();
    console.log(window_selection);

    //Also, Word Online adds special class name to every selected element
    //in the document. So, this is another way to get the selected text.

    var elements_selection = document.getElementsByClassName("Selected");
    console.log(elements_selection);
}

这是证明截图：

Word Online 文档中有访问选中文本的结果

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

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