Question

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

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

的manifest.json

{
    "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"]
}

popup.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>

popup.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);
});

toolbar.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开发者工具中看到的内容：

我真正得到的是：

P.S。该扩展程序与Google文档完美配合。

Answer 1

我不确定如何构建Word Online编辑器或者为什么不能使用window.getSelection()，但我立刻注意到的一件事是，当您在其中选择文本时，编辑器会将该文本设为{ {1}}课程。那么也许你可以以某种方式利用它？覆盖相关元素的风格？

可能您可以使用Selected并查找要添加到元素的此类名称。您必须进行一些实验，看看这是否适合您的需求，显然如果Microsoft更改了类名或行为，您的扩展会中断。

尝试选择一些文字并添加

MutationObserver

在控制台中。

Answer 2

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

目前我看到的整体情况有所不同，所以我改变了文件数量及其内容。

的manifest.json

gcc -o testloadfile testloadfile.c

./testloadfile "correctme.txt"

content_script.js

$data = json_decode($response, true);
for ($i=0;$i<count($data);$i++){
    echo $data[$i];
}

这是证明截图：

There are results of accessing the selected text in the Word Online document

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

2 个答案: